很多时候,我们习惯于这样操作数组和对象:
data() { // data数据
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
// 数据更新 数组视图不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 数据更新 对象视图不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}
由于js的限制,Vue 不能检测以上数组的变动,以及对象的添加/删除
很多人会因为像上面这样操作,出现视图没有更新的问题。
解决方式
1、this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象
2、数组原生方法触发视图更新:
Vue可以监测到数组变化的,数组原生方法:
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
意思是使用这些方法不用我们再进行额外的操作,视图自动进行更新。
推荐使用splice
方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作
3、替换数组/对象
比方说:你想遍历这个数组/对象,对每个元素进行处理,然后触发视图更新。
// 文档中的栗子: filter遍历数组,返回一个新数组,用新数组替换旧数组
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
举一反三:可以先把这个数组/对象保存在一个变量中,然后对这个变量进行遍历,等遍历结束后再用变量替换对象/数组。
在对 对象数组处理时,简单的this.$set没能成功,最后用变量替换的方式成功了。