vue中对象数组多层嵌套视图不更新的解决办法

当我们开发的时候，有一些数据是对象里面嵌套数组，数组里面嵌套对象，数据结构很复杂的时候，当你改变数组对象里面的某个值时，发现数据更新了，但是页面不更新，那么应该怎么解决呢？

1、对象更新

{{a.title}}

需要使用，以下这种方式去更新

this.$set(a,'title','列表2');
//或者
Vue.set(a,'title','列表2');

2、数组更新

this.arr=[1,2,3,4];
<span v-for="value in arr">{{value}}</span>

同理：

Vue.set(arr,索引值,value);
//或者
arr.splice(索引值,元素数目,value);

3、数组对象的组合更新

this.arr=[{
key:'key1',
value:[] 
},{
key:'key2',
value:[] 
}];

例如，想要将arr[0].value重新赋一个数组，可以使用

this.arr[0].value.splice(0, 1, ...newArr);
//或者
this.$set(this.arr[0], "value", newArr);

this.$set(参数1，参数2，参数3) 用法总结

更新数组

参数1：数组

参数2：数组的索引

参数3：赋值的数据

更新对象

参数1：对象

参数2：key

参数3：赋值的数