vue数组修改不触发视图更新、vue向响应式对象添加或删除属性

背景：在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况

 

以下4种情况不触发vue响应式更新！！

 

   不能检测到的数组变动是：

    1、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue；

    2、当修改数组的长度时，例如：vm.items.length = newLength；

   不能检测到的对象变动是：
    3、向响应式对象添加属性；

    4、向响应式对象删除属性；

 

 

代码demo效果如下

 

解决方法总结：

1、创建新的数组替换原有数组值

2、使用JavaScript的数组操作函数，这些方法都会返回一个新数组，也是数组替换原理；

3、使用vue自带的 vue.set(object , key , value ); 向响应式对象添加属性；

4、使用vue自带的 vue.delete(object , key ); 向响应式对象删除属性；

5、对象添加属性还可以使用Object.assign({},obj1,obj2)返回获取的新对象替换原有对象；

注意：注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

 

  

 

参考网址：vuejs API ：https://cn.vuejs.org/v2/api/#Vue-set