vue watch监听对象 新旧值一样

vue3中watch监听新旧值一样的处理方式

废话不多说，直接上代码

const objectReactive = reactive({user: {id: 1,name: 'zhangsan',age: 18,},
})
watch(() => objectReactive.user,(n, o) => {console.log(n, o)if (JSON.stringify(n) == JSON.stringify(o)) {return console.log('新旧值相同')} else {return console.log('新旧值不相同')}},{deep: true,}
)const changeObjectReactive = () => {objectReactive.user.age++
}

通过打印最后发现一个问题，watch中的新旧值一样

解决方案

const userComputed = computed(() => {return JSON.parse(JSON.stringify(objectReactive.user))
})
watch(userComputed,(n, o) => {console.log(n, o)if (JSON.stringify(n) == JSON.stringify(o)) {return console.log('新旧值相同')} else {return console.log('新旧值不相同')}},{deep: true,}
)
const changeObjectReactive = () => {objectReactive.user.age++
}

通过computed剥离与原数据的引用关系