Vue2无法检测数组、对象内部变化的解决方法

Vue2无法检测数组内部变化，尤大说原因是会影响会影响性能，而性能的代价和用户体验收益不成正比。不过这个问题在Vue3中用proxy代替defineProperty后得到了解决。

解决方案：

数组：

​1. 使用this.$set(array, index, data)去修改

2.用splice对数组进行修改

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

3.利用临时变量中转

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

中转变量去给数组赋值后改变数组指针位置，会被监听到数据变化。

2.对象

对象

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
     }
   }