有时候我们使用watch并且添加deep:true深度监听一个对象时候,获取到的newVal和oldVal数据一致,官方一点这种现象叫做:深度监听对象出现的同源问题

其实道理很简单,属于vue2.0的坑,其实就是:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本;

大意就是:在打印数组或是对象的时候是通过引用去取的值,当你改变数组时,打印出来的值自然也就变了

watch: {
	obj: {
		handler (newVal, oldVal) {
			// newVal和oldVal打印的话是一样的,指针相同
		},
		deep: true
	}
}

如果你确实需要获取newVal和oldVal,建议使用computed来解决,并且我们知道在computed中是无法获取this的,想要获取可以使用

import Vue from 'vue'
// mounted中添加
Vue.prototype.$t = this
//然后在computed中直接使用
let that = Vue.prototype.$t
// 先用JSON方法在computed属性中对 this.obj 深拷贝
computed: {
   obj() {
   		// 就是当前组件的this
   		console.log(Vue.prototype.$t) 
        return JSON.parse(JSON.stringify(this.obj))
    }
}
 //再监听computed属性中以已经深拷贝过的的 this.obj 
 watch: {
    obj: {   //再监听computed属性中以已经深拷贝过的的 this.obj 
        handler(newVal, oldVal) {
            console.log(newVal)
            console.log(oldVal)
        },
    }

}
Logo

前往低代码交流专区

更多推荐