Vue 不能检测到对象属性的添加或删除
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength
数组:Vue 中是通过对 每个键设置 getter/setter 来实现响应式的,开发者使用数组,目的往往是遍历,此时调用 getter 开销太大了,所以 Vue 不在数组每个键上设置,而是在数组上定义 ob ,并且替换了 push 等等能够影响原数组的原型方法。vue 里data里的数组的每一项在初始化时没有被设置getter和setter,所以不能监控利用索引直接设置一个项,
对象属性添加和删除:Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
解决方法:
1、方案一:利用Vue.set(object,key,value)
对象:Vue.set(vm.obj,"sex","man")
2、方案二:利用this.$set(this.object,key,value)
对象:this.$set(this.obj,"sex","man");
数组:this.$set(this.arr,index,newVal);
3、方案三:利用Object.assign({},this.obj)
对象:
this.obj = Object.assign({},this.obj,{"sex","man"});