vue修改代码同步页面_vue修改数组中对象属性值页面不同步更新渲染问题处理

之前在操作一个接口的时候，由于数据结构比较特殊，vue数组中嵌套了更深的对象，并且在页面操作的过程中对对象属性做了增加。之后蛋疼的发现页面并没有同步渲染。

问题原因：

由于javascript的限制，vue不能检测到对象属性的添加和删除。简单来说，vue已经实例化之后，直接添加或者移除的元素不能被检测，页面则无法同步渲染。如果是根元素的添加和移除，我们可以在实例化的时候提前部署空值，或者创建新的变量赋值给vue响应式对象。

但是对于一些大平台的接口，可能会出现json结构与初始不一致的情况，这种时候想要解决就会很麻烦。

解决方案：

vue提供了set方法来获取状态更新：

Vue.set(vm.firstLevel.secondLevel, 'newAttr', 'value')；

也可以使用：

this.$set(this.firstLevel.secondLevel, 'newAttr', 'value')；

注意这里是$set。

当然如果我们需要添加更多属性，也可以创建新的对象并重新赋值来规避这个问题。性能方面也不需要太过担心，因为Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

另外对于标准数组也是一样的，这样也同样不能被vue检测到变化：

vm.item[index] = value

我们可以使用set来触发数组更新：

Vue.set(arraySet, index, value)

不过vue对于数组的支持相对而言更强大一些：

数组的push,pop,shift,unshift,splice,sort,reverse标准方法是可以被检测到的。