feat(reactivity): add support for AbortController to watch

Author: 9romise

packages/reactivity/__tests__/watch.spec.ts

@@ -289,4 +289,25 @@ describe('watch', () => {
     value.value = true
     expect(value.value).toBe(false)
   })
+
+  it('stop multiple watches by abort controller', async () => {
+    const controller = new AbortController()
+    const state = ref(0)
+    const cb1 = vi.fn()
+    const cb2 = vi.fn()
+    watch(state, cb1, { signal: controller.signal })
+    watch(state, cb2, { signal: controller.signal })
+
+    state.value++
+    await nextTick()
+    expect(cb1).toHaveBeenCalledTimes(1)
+    expect(cb2).toHaveBeenCalledTimes(1)
+
+    controller.abort()
+    state.value++
+    await nextTick()
+    // should not run callback
+    expect(cb1).toHaveBeenCalledTimes(1)
+    expect(cb2).toHaveBeenCalledTimes(1)
+  })
 })

packages/reactivity/src/watch.ts

@@ -47,6 +47,7 @@ export type WatchCallback<V = any, OV = any> = (
 export type OnCleanup = (cleanupFn: () => void) => void
 
 export interface WatchOptions<Immediate = boolean> extends DebuggerOptions {
+  signal?: AbortSignal
   immediate?: Immediate
   deep?: boolean | number
   once?: boolean
@@ -122,7 +123,7 @@ export function watch(
   cb?: WatchCallback | null,
   options: WatchOptions = EMPTY_OBJ,
 ): WatchHandle {
-  const { immediate, deep, once, scheduler, augmentJob, call } = options
+  const { immediate, deep, once, signal, scheduler, augmentJob, call } = options
 
   const warnInvalidSource = (s: unknown) => {
     ;(options.onWarn || warn)(
@@ -226,6 +227,10 @@ export function watch(
     }
   }
 
+  if (signal) {
+    signal.addEventListener('abort', watchHandle, { once: true })
+  }
+
   let oldValue: any = isMultiSource
     ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
     : INITIAL_WATCHER_VALUE

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -432,6 +432,48 @@ describe('api: watch', () => {
     expect(dummy).toBe(1)
   })
 
+  it('stopping the watcher (effect) by abort controller', async () => {
+    const controller = new AbortController()
+    const state = reactive({ count: 0 })
+    let dummy
+    watchEffect(
+      () => {
+        dummy = state.count
+      },
+      { signal: controller.signal },
+    )
+    expect(dummy).toBe(0)
+
+    controller.abort()
+    state.count++
+    await nextTick()
+    // should not update
+    expect(dummy).toBe(0)
+  })
+
+  it('stopping the watcher (with source) by abort controller', async () => {
+    const controller = new AbortController()
+    const state = reactive({ count: 0 })
+    let dummy
+    watch(
+      () => state.count,
+      count => {
+        dummy = count
+      },
+      { signal: controller.signal },
+    )
+
+    state.count++
+    await nextTick()
+    expect(dummy).toBe(1)
+
+    controller.abort()
+    state.count++
+    await nextTick()
+    // should not update
+    expect(dummy).toBe(1)
+  })
+
   it('cleanup registration (effect)', async () => {
     const state = reactive({ count: 0 })
     const cleanup = vi.fn()

packages/runtime-core/src/apiWatch.ts

@@ -41,7 +41,11 @@ type MapSources<T, Immediate> = {
       : never
 }
 
-export interface WatchEffectOptions extends DebuggerOptions {
+export interface BaseWatchEffectOptions extends DebuggerOptions {
+  signal?: AbortSignal
+}
+
+export interface WatchEffectOptions extends BaseWatchEffectOptions {
   flush?: 'pre' | 'post' | 'sync'
 }
 
@@ -61,7 +65,7 @@ export function watchEffect(
 
 export function watchPostEffect(
   effect: WatchEffect,
-  options?: DebuggerOptions,
+  options?: BaseWatchEffectOptions,
 ): WatchHandle {
   return doWatch(
     effect,
@@ -72,7 +76,7 @@ export function watchPostEffect(
 
 export function watchSyncEffect(
   effect: WatchEffect,
-  options?: DebuggerOptions,
+  options?: BaseWatchEffectOptions,
 ): WatchHandle {
   return doWatch(
     effect,