vue深度监听对象newVal和oldVal一样怎么回事
有时候我们使用watch并且添加deep:true深度监听一个对象时候,获取到的newVal和oldVal数据一致,官方一点这种现象叫做:深度监听对象出现的同源问题其实道理很简单,属于vue2.0的坑,其实就是:== 在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。==watch: {obj: {handler (newV
·
有时候我们使用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)
},
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)