feat(reactivity): base watch, getCurrentWatcher, and onWatcherCleanup

[LittleSound]

This PR achieves two objectives:

1. It refactors the apiWatch implementation, incorporating most of its functionality into the baseWatch in reactivity.

2. It incorporates the onWatcherCleanup, previously used in vue/core-vapor repository, directly into the reactivity package of vue/core repository.

baseWatch

The rationale behind refactoring apiWatch is that Vapor requires Watch APIs. However runtime-vapor should not import runtime-core directly. If we don't share reusable Watch API logic between runtime-core and runtime-vapor, it will result in significant code duplication. Furthermore, we plan to extract other codes that can be shared between these two runtimes into separate packages.

onWatcherCleanup

The onWatcherCleanup function has already been implemented in Vapor. Here are corresponding Issue and PR links:

Issue / PR

watchEffect(() => {
  addEventListener(el1, eventName.value, handler)
  addEventListener(el2, eventName.value, handler)
})

function addEventListener(el, event, handler) {
  el.addEventListener(event, handler)
  if (getWatcherEffect()) {
    onWatcherCleanup(() => {
      el.removeEventListener(event, handler)
    })
  }
}

Additionally, provide support for watch

watch(id, async (newId, oldId) => {
  const { response, cancel } = doAsyncWork(newId)
  // `cancel` will be called if `id` changes, cancelling
  // the previous request if it hasn't completed yet
  onWatcherCleanup(cancel)
  data.value = await response
})

[LittleSound]

I ran vitest bench, my modified apiWatch seems to be slower than the original apiWatch. However, I don't have experience in optimizing its performance. Are there any tips or documents that I can refer to?

Minor

This PR

[LittleSound]

Regarding the API design of baseWatch, I haven't made too many changes other than some new callbacks. It is basically the same as doWatch.

If you have any better design suggestions, please put them forward here. I am very happy to listen your suggestions.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	99.1 kB (+452 B)	37.5 kB (+132 B)	33.8 kB (+112 B)
vue.global.prod.js	157 kB (+445 B)	57.3 kB (+155 B)	51 kB (+172 B)

Usages

Name	Size	Gzip	Brotli
createApp	54.5 kB (+454 B)	21.1 kB (+174 B)	19.3 kB (+176 B)
createSSRApp	58.5 kB (+455 B)	22.8 kB (+220 B)	20.8 kB (+198 B)
defineCustomElement	59.1 kB (+457 B)	22.6 kB (+190 B)	20.6 kB (+213 B)
overall	68.1 kB (+459 B)	26.2 kB (+197 B)	23.8 kB (+201 B)

[LittleSound]

I created another separate PR #10173 for onEffectCleanup in order to reduce the reviewing time cost and get merged faster.

[LittleSound]

onEffectCleanup has been implemented in 2cc5615, and the scheduler was recently refactored in #10407. I will update this PR to support these new changes, which may take some time.

[LittleSound]

Due to the obvious difference between onEffectCleanup in 2cc5615 and here, after communicating with Evan, I have renamed the API in this PR to onWatcherCleanup. It will not be deleted yet.

[LittleSound]

Kevin suggested that I move the types and enums related to scheduler in baseWatch into a separate file in reactivity, hence this Commit.

[louiss0]

Why not pass the cleanup function as the third argument?

[LittleSound]

Why not pass the cleanup function as the third argument?

The third parameter of watch is still available as onCleanup. onWatcherCleanup just provides a more flexible API.

[pkg-pr-new]

commit: f0f2647

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@9927

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@9927

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@9927

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@9927

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@9927

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@9927

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@9927

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@9927

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@9927

vue

pnpm add https://pkg.pr.new/vue@9927

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@9927

Open in Stackblitz

[LittleSound]

Hi, Evan. Thank you for helping me improve the code

[yyx990803]

Notable changes applied:

• Rename baseWatch to watch, as "base" doesn't apply if @vue/reactivity is used directly without Vue.
• Move scheduler related types and scheduler-specific logic back to core
• Avoid duplicated callWithErrorHandling implementation
• Move WatchHandle to base watch - return type of base watch is now WatchHandle instead of ReactiveEffect

[yyx990803]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	❌ failure	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	❌ failure	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[yyx990803]

/ecosystem-ci run radix-vue

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
radix-vue	✅ success	✅ success