解决vue中watch监听对象变化获取不到旧数据的问题
1.问题代码
watch: {
pageInfo: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
}
}
结果:打印出来newVal和oldVal输出内容一样
console.log(newVal === oldVal) //true
发现这俩对象一样,它们两指向的是同一个引用,这说明 Watch 只是侦听到它改变了,并没有把之前的老值给缓存下来,引用类型直接指向了引用地址。
2.解决方法
computed: {
deepPageInfo() {
return JSON.parse(JSON.stringify(this.pageInfo));
}
},
watch: {
deepPageInfo: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
deep: true
}
},
使用computed计算属性对pageInfo进行深拷贝,然后监听deepPageInfo的变化。这样就能获取到旧数据的值。