关于vue无法侦听数组及对象属性的变化的解决方案

参考博文

https://ainyi.com/51

https://blog.csdn.net/qq_38280242/article/details/102807862

watch一般是可以监听变量的变化的，但是对于数组或者对象在某些特定情况下是无法监听到的。这种情况其实和双向绑定的原理有关。Vue双向绑定原理是利用js中的Object.defineproperty重定义对象的GET和SET方法，而同时这种方法存在着缺陷，就是只能监听到对象内已有的值。详细可见官方文档https://cn.vuejs.org/v2/guide/reactivity.html。

一、数组

1、可以监听到的情况

如push、splice、=赋值（array=[1,2,3]）

2、无法监听到的情况

使用下标修改某个元素（这种比较常见）

array[index] = 1

object.a = 3

直接修改数组length

array.length = 5

3、解决方案

• this.$set(array, index, data) - 这是个深度的修改，某些情况下可能导致你不希望的结果，因此最好还是慎用

this.dataArr = this.originArr
this.$set(this.dataArr, 0, {data: '修改第一个元素'})
console.log(this.dataArr)        
console.log(this.originArr)        //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果

• 上面提到的splice方法进行增删改
• 利用临时变量进行中转

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

二、对象

对象和数组都是js里的引用类型，在实际存储中，数据是存储在堆中的，利用存储在栈里的对象名或者数组名的指针进行索引，因此也存在在浅拷贝和深拷贝以及等号赋值时，到底是仅仅新建了一个指针指向了同一份数据，还是两个指针分别指向了两份完全一样的数据的问题

这部分内容参考https://juejin.im/post/59ac1c4ef265da248e75892b

1、可以监听到的

对象的直接=赋值

this.obj = {name: 'test'}

2、无法监听到的

对象属性的增删改

obj: {
    prop1: 'data1',
    prop2: 'data2'
}
...
// 增
this.obj.prop3 = 'data3'
// 删
delete this.obj.prop1
// 改
this.obj.prop1 = 'data4'

3、解决办法

• this.$set(obj, key ,value) - 可实现增、改
• watch时添加deep：true深度监听，只能监听到属性值的变化，新增、删除属性无法监听

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

• watch时直接监听某个key

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

• object.assign()+直接=赋值

this.watchObj = Object.assign({}, this.watchObj, {
  name: 'xiaoyue',
  age: 15,
});