312 lines
7.6 KiB
TypeScript
312 lines
7.6 KiB
TypeScript
import {
|
|
effect,
|
|
stop,
|
|
isRef,
|
|
Ref,
|
|
ComputedRef,
|
|
ReactiveEffectOptions
|
|
} from '@vue/reactivity'
|
|
import { queueJob } from './scheduler'
|
|
import {
|
|
EMPTY_OBJ,
|
|
isObject,
|
|
isArray,
|
|
isFunction,
|
|
isString,
|
|
hasChanged,
|
|
NOOP,
|
|
remove
|
|
} from '@vue/shared'
|
|
import {
|
|
currentInstance,
|
|
ComponentInternalInstance,
|
|
currentSuspense,
|
|
Data,
|
|
isInSSRComponentSetup,
|
|
recordInstanceBoundEffect
|
|
} from './component'
|
|
import {
|
|
ErrorCodes,
|
|
callWithErrorHandling,
|
|
callWithAsyncErrorHandling
|
|
} from './errorHandling'
|
|
import { onBeforeUnmount } from './apiLifecycle'
|
|
import { queuePostRenderEffect } from './renderer'
|
|
import { warn } from './warning'
|
|
|
|
export type WatchEffect = (onCleanup: CleanupRegistrator) => void
|
|
|
|
export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)
|
|
|
|
export type WatchCallback<V = any, OV = any> = (
|
|
value: V,
|
|
oldValue: OV,
|
|
onCleanup: CleanupRegistrator
|
|
) => any
|
|
|
|
type MapSources<T> = {
|
|
[K in keyof T]: T[K] extends WatchSource<infer V> ? V : never
|
|
}
|
|
|
|
type MapOldSources<T, Immediate> = {
|
|
[K in keyof T]: T[K] extends WatchSource<infer V>
|
|
? Immediate extends true ? (V | undefined) : V
|
|
: never
|
|
}
|
|
|
|
export type CleanupRegistrator = (invalidate: () => void) => void
|
|
|
|
export interface BaseWatchOptions {
|
|
flush?: 'pre' | 'post' | 'sync'
|
|
onTrack?: ReactiveEffectOptions['onTrack']
|
|
onTrigger?: ReactiveEffectOptions['onTrigger']
|
|
}
|
|
|
|
export interface WatchOptions<Immediate = boolean> extends BaseWatchOptions {
|
|
immediate?: Immediate
|
|
deep?: boolean
|
|
}
|
|
|
|
export type StopHandle = () => void
|
|
|
|
const invoke = (fn: Function) => fn()
|
|
|
|
// initial value for watchers to trigger on undefined initial values
|
|
const INITIAL_WATCHER_VALUE = {}
|
|
|
|
// overload #1: simple effect
|
|
export function watch(
|
|
effect: WatchEffect,
|
|
options?: BaseWatchOptions
|
|
): StopHandle
|
|
|
|
// overload #2: single source + cb
|
|
export function watch<T, Immediate extends Readonly<boolean> = false>(
|
|
source: WatchSource<T>,
|
|
cb: WatchCallback<T, Immediate extends true ? (T | undefined) : T>,
|
|
options?: WatchOptions<Immediate>
|
|
): StopHandle
|
|
|
|
// overload #3: array of multiple sources + cb
|
|
// 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<
|
|
T extends Readonly<WatchSource<unknown>[]>,
|
|
Immediate extends Readonly<boolean> = false
|
|
>(
|
|
sources: T,
|
|
cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
|
|
options?: WatchOptions<Immediate>
|
|
): StopHandle
|
|
|
|
// implementation
|
|
export function watch<T = any>(
|
|
effectOrSource: WatchSource<T> | WatchSource<T>[] | WatchEffect,
|
|
cbOrOptions?: WatchCallback<T> | WatchOptions,
|
|
options?: WatchOptions
|
|
): StopHandle {
|
|
if (isFunction(cbOrOptions)) {
|
|
// watch(source, cb)
|
|
return doWatch(effectOrSource, cbOrOptions, options)
|
|
} else {
|
|
// watch(effect)
|
|
return doWatch(effectOrSource, null, cbOrOptions)
|
|
}
|
|
}
|
|
|
|
function doWatch(
|
|
source: WatchSource | WatchSource[] | WatchEffect,
|
|
cb: WatchCallback | null,
|
|
{ immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
|
|
): StopHandle {
|
|
if (__DEV__ && !cb) {
|
|
if (immediate !== undefined) {
|
|
warn(
|
|
`watch() "immediate" option is only respected when using the ` +
|
|
`watch(source, callback) signature.`
|
|
)
|
|
}
|
|
if (deep !== undefined) {
|
|
warn(
|
|
`watch() "deep" option is only respected when using the ` +
|
|
`watch(source, callback) signature.`
|
|
)
|
|
}
|
|
}
|
|
|
|
const instance = currentInstance
|
|
const suspense = currentSuspense
|
|
|
|
let getter: () => any
|
|
if (isArray(source)) {
|
|
getter = () =>
|
|
source.map(
|
|
s =>
|
|
isRef(s)
|
|
? s.value
|
|
: callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
|
|
)
|
|
} else if (isRef(source)) {
|
|
getter = () => source.value
|
|
} else if (cb) {
|
|
// getter with cb
|
|
getter = () =>
|
|
callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
|
|
} else {
|
|
// no cb -> simple effect
|
|
getter = () => {
|
|
if (instance && instance.isUnmounted) {
|
|
return
|
|
}
|
|
if (cleanup) {
|
|
cleanup()
|
|
}
|
|
return callWithErrorHandling(
|
|
source,
|
|
instance,
|
|
ErrorCodes.WATCH_CALLBACK,
|
|
[registerCleanup]
|
|
)
|
|
}
|
|
}
|
|
|
|
if (deep) {
|
|
const baseGetter = getter
|
|
getter = () => traverse(baseGetter())
|
|
}
|
|
|
|
let cleanup: Function
|
|
const registerCleanup: CleanupRegistrator = (fn: () => void) => {
|
|
cleanup = runner.options.onStop = () => {
|
|
callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
|
|
}
|
|
}
|
|
|
|
// in SSR there is no need to setup an actual effect, and it should be noop
|
|
// unless it's eager
|
|
if (__NODE_JS__ && isInSSRComponentSetup) {
|
|
if (!cb) {
|
|
getter()
|
|
} else if (immediate) {
|
|
callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
|
|
getter(),
|
|
undefined,
|
|
registerCleanup
|
|
])
|
|
}
|
|
return NOOP
|
|
}
|
|
|
|
let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE
|
|
const applyCb = cb
|
|
? () => {
|
|
if (instance && instance.isUnmounted) {
|
|
return
|
|
}
|
|
const newValue = runner()
|
|
if (deep || hasChanged(newValue, oldValue)) {
|
|
// cleanup before running cb again
|
|
if (cleanup) {
|
|
cleanup()
|
|
}
|
|
callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
|
|
newValue,
|
|
// pass undefined as the old value when it's changed for the first time
|
|
oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
|
|
registerCleanup
|
|
])
|
|
oldValue = newValue
|
|
}
|
|
}
|
|
: void 0
|
|
|
|
let scheduler: (job: () => any) => void
|
|
if (flush === 'sync') {
|
|
scheduler = invoke
|
|
} else if (flush === 'pre') {
|
|
scheduler = job => {
|
|
if (!instance || instance.vnode.el != null) {
|
|
queueJob(job)
|
|
} else {
|
|
// with 'pre' option, the first call must happen before
|
|
// the component is mounted so it is called synchronously.
|
|
job()
|
|
}
|
|
}
|
|
} else {
|
|
scheduler = job => {
|
|
queuePostRenderEffect(job, suspense)
|
|
}
|
|
}
|
|
|
|
const runner = effect(getter, {
|
|
lazy: true,
|
|
// so it runs before component update effects in pre flush mode
|
|
computed: true,
|
|
onTrack,
|
|
onTrigger,
|
|
scheduler: applyCb ? () => scheduler(applyCb) : scheduler
|
|
})
|
|
|
|
recordInstanceBoundEffect(runner)
|
|
|
|
// initial run
|
|
if (applyCb) {
|
|
if (immediate) {
|
|
applyCb()
|
|
} else {
|
|
oldValue = runner()
|
|
}
|
|
} else {
|
|
runner()
|
|
}
|
|
|
|
return () => {
|
|
stop(runner)
|
|
if (instance) {
|
|
remove(instance.effects!, runner)
|
|
}
|
|
}
|
|
}
|
|
|
|
// this.$watch
|
|
export function instanceWatch(
|
|
this: ComponentInternalInstance,
|
|
source: string | Function,
|
|
cb: Function,
|
|
options?: WatchOptions
|
|
): StopHandle {
|
|
const ctx = this.proxy as Data
|
|
const getter = isString(source) ? () => ctx[source] : source.bind(ctx)
|
|
const stop = watch(getter, cb.bind(ctx), options)
|
|
onBeforeUnmount(stop, this)
|
|
return stop
|
|
}
|
|
|
|
function traverse(value: unknown, seen: Set<unknown> = new Set()) {
|
|
if (!isObject(value) || seen.has(value)) {
|
|
return
|
|
}
|
|
seen.add(value)
|
|
if (isArray(value)) {
|
|
for (let i = 0; i < value.length; i++) {
|
|
traverse(value[i], seen)
|
|
}
|
|
} else if (value instanceof Map) {
|
|
value.forEach((v, key) => {
|
|
// to register mutation dep for existing keys
|
|
traverse(value.get(key), seen)
|
|
})
|
|
} else if (value instanceof Set) {
|
|
value.forEach(v => {
|
|
traverse(v, seen)
|
|
})
|
|
} else {
|
|
for (const key in value) {
|
|
traverse(value[key], seen)
|
|
}
|
|
}
|
|
return value
|
|
}
|