vue2.x改變數據：
<template>
<div class="v2">
這是數據展示：
<div v-for="item in nm" :key="item">name: {{item.name}}, type: {{item.type}}</div>
<div @click="chfn">點擊改變數據</div>
</div>
</template>
<script>
export default {
data() {
return {
nm: [{name: 'a1',type: 1},{name: 'a2',type: 2},{name: 'a3',type: 3},]
}
},
methods: {
chfn() {
this.nm = [{name: 'a111',type: 10},{name: 'a222',type: 20},{name: 'a333',type: 30},]
}
}
}
</script>
<style>
</style>
vue2.x 沒有點擊改變數據方法的時候：
這是vue2.x 點擊了改變方法后改變了數據
接下來我們看看 vue3.x 的初始化數據和改變數據：
<template>
<div>展示ref初始化的數據：{{ num }}</div>
<div @click="add" style="margin-bottom: 20px;background: #ccc;">點擊改變ref賦值數據(每點擊一次加上10)</div>
<div v-for="item in a2.nm" :key="item">展示reactive初始化的數據：{{item.type}}</div>
<div @click="aam" style="background: #ccc;" >點擊改變reactive賦值數據(我這里測試時是點擊后隨意改變的)</div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
name: "Button",
setup() {
const num = ref(2);
// ref 初始化單一型數據
function add() {
// 改變num的方法
num.value += 10;
}
const a2 = reactive({nm: [{name: 'a1',type: 1},{name: 'a2',type: 2},{name: 'a3',type: 3},]})
// reactive 初始化復雜型數據
function aam(item) {
// 改變a2的方法
console.log('aam', item)
a2.nm = [{name: 'a11',type: 11},{name: 'a22',type: 22},{name: 'a33',type: 33},]
}
return {
num,
add,
// 改變num的方法
a2,
aam
// 改變a2的方法
}
},
};
</script>
看起來要稍微的麻煩一點。它把定義和改變數據都放到了setup里面。還區分了定義數據的不同關鍵字(ref，reactive)
vue3.x 沒有點擊改變數據方法的時候：
這是 vue3.x 點擊了改變方法后改變了數據
可以看到 vue3 的修改數據已經成功。
總結：vue2 和vue3對數據的初始化賦值還是有很大區別。在改變數據時也是有不小的區別。但是也不難。