Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

watch deep options incorrect action #11983

Open
guda-art opened this issue Sep 20, 2024 · 4 comments · May be fixed by #11998
Open

watch deep options incorrect action #11983

guda-art opened this issue Sep 20, 2024 · 4 comments · May be fixed by #11998

Comments

@guda-art
Copy link

guda-art commented Sep 20, 2024

Vue version

3.5.6

Link to minimal reproduction

no

Steps to reproduce

1.case1

watch(
        [
          () => obj.value.number,
        ],
        () => {
          console.log('trigger')
        }
      );

2.case2

watch(
        [
          () => obj.value.number,
        ],
        () => {
          console.log('trigger')
        }, {
          deep: true
       }
      );

when use deep: true; number no change but other prop of obj change trigger still (Verified not to trigger when other change)

What is expected?

Consistent behavior

What is actually happening?

no Consistent behavior

System Info

Chrome 128.0.6613.137

Any additional comments?

No response

@edison1105
Copy link
Member

Please provide a minimal reproduction.

@jh-leong
Copy link
Member

This behavior is expected. According to the docs: https://vuejs.org/api/reactivity-core.html#watch

When using a getter source, the watcher only fires if the getter's return value has changed. If you want the callback to fire even on deep mutations, you need to explicitly force the watcher into deep mode with { deep: true }. Note in deep mode, the new value and the old will be the same object if the callback was triggered by a deep mutation:

In your case, { deep: true } causes the watcher to trigger when any property of the object changes, not just number.

@guda-art
Copy link
Author

This behavior is expected. According to the docs: https://vuejs.org/api/reactivity-core.html#watch

When using a getter source, the watcher only fires if the getter's return value has changed. If you want the callback to fire even on deep mutations, you need to explicitly force the watcher into deep mode with { deep: true }. Note in deep mode, the new value and the old will be the same object if the callback was triggered by a deep mutation:

In your case, { deep: true } causes the watcher to trigger when any property of the object changes, not just number.

Firstly, my initial question was about whether to enable deep or not, and the behavior should be consistent (even if the value of other attributes changes when deep is enabled, it will not trigger the observer for that attribute). The link explains another issue, that is, when deep is enabled, if the attribute source that the getter depends on is replaced, even if the return value remains unchanged, the observer will still be triggered

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants