Vue.js不能检测数组下标赋值、长度变化、对象属性动态添加和删除的原因和解决办法

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"})；