vue的数组如何存储数据

Posted 2020-09-14 Lonely existence, lonely burni

vue 和 angular 还有有些区别的，
比如，vue中的数组数据改变后，view并没有发生改变，angular就不会这样。

所以VUE 在数组扩展方法中提供以了一个新的API arr.$set(index, value);
此方法通过索引index设置数组元素来触发视图的跟新。

例如：vue 中的
data {
    return {
       aa: [{name:jxj,age:25}，{name:jxj2,age:252}，{name:jxj3,age:253}]   }
}

view : 中  <p>my name{{aa[0].name}},my age is {{aa[0].age}}</p>

（1）.当我们直接用索引设置元素aa[i].name 和 aa[i].age时，view不会发生改变。
这是vue的一个缺点，为了弥补，vue中提供了$set()方法，vue中还提供了$remove方法，直接删除数组中的指定元素。this.items.$remove(item)。

那么我们需要使用  aa.$set(0, Object.assign({},aa[0],{name:‘jxj2‘,age:26}))，才可以触发view的变换。


Object.assign()是ES6中对象的新方法，合并对象，将原对象中所以可枚举的属性，复制到目标对象中。

这里Object.assign({},aa[0],{name:‘jxj2‘,age:26}) 目标对象是个空对象，将对象中{name:‘jxj2‘,age:26}修改的属性合并到源对象aa[0]中，最终又合并到空对象中。形成一个新对象
{name:‘jxj2‘,age:26}。

ps:和jq 的extend()原理一样的啊