diff --git a/packages/runtime-core/src/apiOptions.ts b/packages/runtime-core/src/apiOptions.ts index 8af62b75..b306943f 100644 --- a/packages/runtime-core/src/apiOptions.ts +++ b/packages/runtime-core/src/apiOptions.ts @@ -16,7 +16,7 @@ import { NOOP } from '@vue/shared' import { computed } from './apiReactivity' -import { watch, WatchOptions, WatchHandler } from './apiWatch' +import { watch, WatchOptions, WatchCallback } from './apiWatch' import { provide, inject } from './apiInject' import { onBeforeMount, @@ -133,8 +133,8 @@ export type ExtractComputedReturns = { type WatchOptionItem = | string - | WatchHandler - | { handler: WatchHandler } & WatchOptions + | WatchCallback + | { handler: WatchCallback } & WatchOptions type ComponentWatchOptionItem = WatchOptionItem | WatchOptionItem[] @@ -463,7 +463,7 @@ function createWatcher( if (isString(raw)) { const handler = renderContext[raw] if (isFunction(handler)) { - watch(getter, handler as WatchHandler) + watch(getter, handler as WatchCallback) } else if (__DEV__) { warn(`Invalid watch handler specified by key "${raw}"`, handler) } diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index 7f3016e9..0bcfbde1 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -31,12 +31,22 @@ import { onBeforeUnmount } from './apiLifecycle' import { queuePostRenderEffect } from './renderer' import { warn } from './warning' -export type WatchHandler = ( +export type WatchEffect = (onCleanup: CleanupRegistrator) => void + +export type WatchSource = Ref | ComputedRef | (() => T) + +export type WatchCallback = ( value: T, oldValue: T, onCleanup: CleanupRegistrator ) => any +type MapSources = { + [K in keyof T]: T[K] extends WatchSource ? V : never +} + +export type CleanupRegistrator = (invalidate: () => void) => void + export interface WatchOptions { lazy?: boolean flush?: 'pre' | 'post' | 'sync' @@ -47,25 +57,15 @@ export interface WatchOptions { export type StopHandle = () => void -export type WatcherSource = Ref | ComputedRef | (() => T) - -type MapSources = { - [K in keyof T]: T[K] extends WatcherSource ? V : never -} - -export type CleanupRegistrator = (invalidate: () => void) => void - -export type SimpleEffect = (onCleanup: CleanupRegistrator) => void - const invoke = (fn: Function) => fn() // overload #1: simple effect -export function watch(effect: SimpleEffect, options?: WatchOptions): StopHandle +export function watch(effect: WatchEffect, options?: WatchOptions): StopHandle // overload #2: single source + cb export function watch( - source: WatcherSource, - cb: WatchHandler, + source: WatchSource, + cb: WatchCallback, options?: WatchOptions ): StopHandle @@ -73,16 +73,16 @@ export function watch( // Readonly constraint helps the callback to correctly infer value types based // on position in the source array. Otherwise the values will get a union type // of all possible value types. -export function watch[]>>( +export function watch[]>>( sources: T, - cb: WatchHandler>, + cb: WatchCallback>, options?: WatchOptions ): StopHandle // implementation export function watch( - effectOrSource: WatcherSource | WatcherSource[] | SimpleEffect, - cbOrOptions?: WatchHandler | WatchOptions, + effectOrSource: WatchSource | WatchSource[] | WatchEffect, + cbOrOptions?: WatchCallback | WatchOptions, options?: WatchOptions ): StopHandle { if (isFunction(cbOrOptions)) { @@ -96,8 +96,8 @@ export function watch( } function doWatch( - source: WatcherSource | WatcherSource[] | SimpleEffect, - cb: WatchHandler | null, + source: WatchSource | WatchSource[] | WatchEffect, + cb: WatchCallback | null, { lazy, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ ): StopHandle { const instance = currentInstance