Watch with getter doesn't react on object property (with ref)

This issue has been tracked since 2022-07-28.

Version

2.7.8

Reproduction link

codesandbox.io

Steps to reproduce

Change the text in the first (testRefObj) input field.

Watch using a getter on an object property made reactive using ref()

What is expected?

Console should log watch testRefObj.text + the changed text.
Same as the second input (string).
(In component HelloWorld.vue)

What is actually happening?

Only watch deep testRefObj gets logged (watch with deep: true on whole object, instead of a single property by getter)


It's stated here to use a getter to watch on a single property of an object, but this doesn't work: https://vuejs.org/guide/essentials/watchers.html#watch-source-types

deep: true is a workaround, but on objects with complex structures and more data, this will result in performance issues.

nooooooom wrote this answer on 2022-08-05

Maybe you should watch the () => testRefObj.value.text.

Jackllllll wrote this answer on 2022-08-05

() => testRefObj.value.text it would be appear error! He should be use const testRefObj= reactive({text:''}) and watch(() => testRefObj.text,value => {/* ... */}) and more https://vuejs.org/api/reactivity-core.html#watch

TheEvilCoder42 wrote this answer on 2022-08-05

@Jackllllll Seems you're right, it works with reactive() (updated example).
Maybe I didn't understand the difference to ref(), I thought that I can't update the object (which I need to), but apart from not using the .value syntax, it seems to work.
But ref() should just call reactive() on an object, as stated here: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref
So maybe that's the real error here.

nooooooom wrote this answer on 2022-08-05

Hey, ref is just a nested layer of responsive value compared to reactive, the important thing is not whether to use ref or reactive to define the value, but how you can make watch subscribe to it.

In the case, the get of text is wrong, you should get the value defined on ref by testRefObj.value.text.

TheEvilCoder42 wrote this answer on 2022-08-05

@nooooooom I was quite sure this would give an error (since it's not "reactive" - like @Jackllllll said), but actually it does work.
Seems this should be mentioned in the docs.

Jackllllll wrote this answer on 2022-08-05

@nooooooom u can try own ide! To verify it's right by example of codesandbox.io

TheEvilCoder42 wrote this answer on 2022-08-05

@Jackllllll I updated the example with the suggestion from @nooooooom and it does work 👍

yyx990803 wrote this answer on 2022-08-19

This seems to be a misunderstanding so there's nothing to fix here.

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-06
Star Count 199800
Watcher Count 6093
Fork Count 32882
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date