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

feat(runtime-core): add once option to watch #9034

Merged
merged 3 commits into from
Aug 30, 2023

Conversation

Alfred-Skyblue
Copy link
Member

In certain scenarios, there are instances when I only need to use the watch function to monitor data changes once. For example, when detecting duplicate submissions of a form. Currently, my approach involves calling the stop function within the callback, but this method lacks elegance. Hence, I have introduced an once parameter to the watch function. When the once parameter is set to true, it automatically stops monitoring after the initial change is detected.

Now:

const formData = ref({
  name: 'John',
  age: 18
})

const stop = watch(formData, (newVal, oldVal) => {
  console.log(newVal, oldVal)
  stop()
})

Expect:

const formData = ref({
  name: 'John',
  age: 18
})

watch(formData, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { once: true })

@github-actions
Copy link

github-actions bot commented Aug 24, 2023

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 85.9 kB (+61 B) 32.7 kB (+36 B) 29.5 kB (+33 B)
vue.global.prod.js 132 kB (+61 B) 49.4 kB (+32 B) 44.3 kB (+28 B)

Usages

Name Size Gzip Brotli
createApp 47.9 kB (+50 B) 18.9 kB (+26 B) 17.2 kB (+32 B)
createSSRApp 50.7 kB (+50 B) 20 kB (+30 B) 18.3 kB (+62 B)
defineCustomElement 50.3 kB (+50 B) 19.7 kB (+24 B) 17.9 kB (+37 B)
overall 61.3 kB (+50 B) 23.7 kB (+35 B) 21.6 kB (+40 B)

@sxzz
Copy link
Member

sxzz commented Aug 24, 2023

It's a feature we need to consider if it's really necessary to merge into Vue core.
As we all know, VueUse is a significant and indispensable 3rd library in Vue's ecosystem, and there's already a watchOnce in it.

I think we shouldn't put all of the things into Vue core unless the feature we want is used very frequently and widely (like toValue, new toRef, MaybeRefOrGetter). We have to prove the importance of this feature.

@Alfred-Skyblue
Copy link
Member Author

Indeed, VueUse can achieve this functionality. However, in scenarios where we are encapsulating components within standalone libraries, we might not intend to incorporate additional third-party libraries. I've provided a list of the common use cases I frequently encounter:

  1. Switching states: When data changes, toggling the state into an editing mode.
  2. Monitoring form data changes: This is used to prevent duplicate submissions.
  3. Listening to data changes to determine whether to save drafts upon closing.
  4. Listening to data changes to determine whether to prompt for saving upon closing.

Considering the points mentioned above, I believe the existence of the once option is necessary.

@sxzz sxzz added ready for review This PR requires more reviews and removed ready for review This PR requires more reviews labels Aug 25, 2023
Copy link
Member

@sxzz sxzz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM from a code perspective, but we still need to wait for more perspectives about the necessity of this feature.

@sxzz sxzz changed the title feat(apiWatch): add once option to the watch function feat(runtime-core): add once option to watch Aug 30, 2023
@sxzz sxzz changed the base branch from main to 3.4 August 30, 2023 07:17
@sxzz
Copy link
Member

sxzz commented Aug 30, 2023

Thanks for your contribution. It will be released as 3.4.

@sxzz sxzz merged commit d48bb35 into vuejs:3.4 Aug 30, 2023
11 checks passed
sxzz pushed a commit that referenced this pull request Sep 5, 2023
@sxzz sxzz mentioned this pull request Sep 5, 2023
@Alfred-Skyblue Alfred-Skyblue deleted the feat-watch-once branch September 5, 2023 14:56
sxzz pushed a commit that referenced this pull request Sep 21, 2023
sxzz pushed a commit that referenced this pull request Sep 22, 2023
sxzz pushed a commit that referenced this pull request Oct 14, 2023
johnsoncodehk added a commit to johnsoncodehk/core that referenced this pull request Oct 14, 2023
sxzz pushed a commit that referenced this pull request Oct 18, 2023
sxzz pushed a commit that referenced this pull request Oct 19, 2023
baiwusanyu-c pushed a commit to baiwusanyu-c/bwsy-vue-core that referenced this pull request Oct 20, 2023
sxzz pushed a commit that referenced this pull request Oct 20, 2023
sxzz pushed a commit that referenced this pull request Oct 23, 2023
sxzz pushed a commit that referenced this pull request Oct 27, 2023
sxzz pushed a commit to baiwusanyu-c/bwsy-vue-core that referenced this pull request Oct 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready for review This PR requires more reviews
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants