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中的新旧值一样
解决方案文章来源：https://www.toymoban.com/news/detail-658017.html
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剥离与原数据的引用关系文章来源地址https://www.toymoban.com/news/detail-658017.html
到了这里，关于vue watch监听对象 新旧值一样的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
