Subscribe on changes!

watch and Reactive work together to use deep listening issues

avatar
Jun 29th 2022

Vue version

vue 3.0

Link to minimal reproduction

https://github.com/vuejs/vue

Steps to reproduce

When reactive and watch's deep monitoring are used together in vue3, when the first parameter of watch monitors the object, how to solve the problem that the new value of the second parameter callback function is consistent with the old value?

What is expected?

Be resolved

What is actually happening?

Unable to detect

System Info

When reactive and watch's deep monitoring are used together in vue3, when the first parameter of watch monitors the object, how to solve the problem that the new value of the second parameter callback function is consistent with the old value?

Any additional comments?

No response

avatar
Jun 29th 2022

the old value is the same as the new value because both are the same object that has been mutated.

If you would need to detect the actual differences, you would have to clone the object i.e. like this:

watch(
  () => _.cloneDeep(obj)
  (newObj, oldObj) => { do something }
)
avatar
Jun 29th 2022
watch(()=>cloneDeep(obj),(newvalue,odlvalue)=>{
  console.log(newvalue,odlvalue);
},{deep:true})

Oh, I see, thank you. This problem has been solved,I am glad to communicate with you this time, and I have learned a lot of knowledge