Vue2.0为什么不能检查数组的变化，该怎么解决？

Vue 2的响应式系统通过 Object.defineProperty 将 data 中的属性转换为 getter/setter，从而在数据被访问或修改时触发更新。

• 技术限制：Object.defineProperty 主要用于拦截对象属性的读写。虽然理论上也能用于数组索引，但为每个索引和数组长度都添加 getter/setter 会带来巨大的性能开销。

• 设计决策：权衡之下，Vue 2 选择放弃通过 Object.defineProperty 来监听数组索引变化和 length 属性修改这种方式。

小结：是出于对性能原因的考虑，没有去实现它。而不是不能实现。

解决方案

数组

1. this.$set(array, index, data)

   //这是个深度的修改，某些情况下可能导致你不希望的结果，因此最好还是慎用
   this.dataArr = this.originArr
   this.$set(this.dataArr, 0, {data: '修改第一个元素'})
   console.log(this.dataArr)        
   console.log(this.originArr)  //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果 

2. splice

   //因为splice会被监听有响应式，而splice又可以做到增删改。

3. 利用临时变量进行中转

   let tempArr = [...this.targetArr]
   tempArr[0] = {data: 'test'}
   this.targetArr = tempArr

对象

1. this.$set(obj, key ,value) - 可实现增、改

2. watch时添加deep：true深度监听，只能监听到属性值的变化，新增、删除属性无法监听

   this.$watch('blog', this.getCatalog, {
       deep: true
       // immediate: true // 是否第一次触发
     });

3. watch时直接监听某个key

   watch: {
     'obj.name'(curVal, oldVal) {
       // TODO
     }
   }