vue监听不到数组对象的变化

对于普通的js对象

 - Vue 将遍历此对象所有的 property，
 - 并使用 Object.defineProperty 把这些 property 全部转为getter/setter， 
 - 使得vue可以在内部对这些数据进行追踪依赖， 在property被访问和修改时通知变更，重新渲染相关联的组件。

关于对象

Vue 不允许动态添加根级别的响应式 property。但是我们可以利用vue的内置方法，

 - 使用Vue.set(object, propertyName, value)方法
 - 该方法向嵌套对象添加响应式property，此时vue可以监听到对象的变化。

// 非响应式-直接通过对象的属性名赋值
this.obj.prop1 = '1'  // 增
delete this.obj.prop2  // 删
this.obj.prop3 = '3'  // 改

 // 响应式设置 
Vue.set(vm.obj, 'prop1', 2)  // Vue.set(obj, key ,value) 
this.$set(this.obj,'prop1',2) // this.$set(obj, key ,value) 
this.obj = {name: 'test'} // 直接赋值

关于数组

Vue 不能检测以下数组的变动，因为这些都是不是响应式的。

 - 如利用索引直接设置一个数组项，即使用下标修改某个元素（vm.arr[indexOfItem] = newValue）
 - 直接修改数组的长度（vm.arr.length = newLength） 

// 响应式设置-解决方案
Vue.set(vm.items, indexOfItem, newValue)
this.$set(vm.items, indexOfItem, newValue)

vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)