vue深度监听对象newVal和oldVal一样怎么回事_vue监测表单变化 oldval, newval 一样

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

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

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

watch: {
	obj: {
		handler (newVal, oldVal) {
			// newVal和oldVal打印的话是一样的，指针相同
		},
		deep: true
	}
}
1
2
3
4
5
6
7
8

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

import Vue from 'vue'
// mounted中添加
Vue.prototype.$t = this
//然后在computed中直接使用
let that = Vue.prototype.$t
1
2
3
4
5

// 先用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)
        },
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18