参考博文
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, });