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对数据的初始化赋值还是有很大区别。在改变数据时也是有不小的区别。但是也不难。
