vue 非响应式属性放哪_不触发vue响应式更新的4种情况

前戏：

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

正文：

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

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

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

不能检测到的对象变动是：

3、向响应式对象添加属性；

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

解决方法总结：

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

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

支持的方法：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

不支持的方法：

filter()、 concat()、slice()

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

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

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

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

尾声

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