前戏:
在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 实例的根数据对象。