Vue3源码分析侦听器watch的实现原理_vue.js_

// watch 函数接收两个参数，source 是响应式数据，cb 是回调函数 function watch(source, cb){ effect( // 触发读取操作，从而建立联系 () => source.foo, { scheduler(){ // 当数据变化时，调用回调函数 cb cb() } } ) }

// packages/runtime-core/src/apiWatch.ts // 数据源是一个数组 // overload: array of multiple sources + cb export function watch< T extends MultiWatchSources, Immediate extends Readonly = false >( sources: [...T], cb: WatchCallback, MapSources>, options?: WatchOptions ): WatchStopHandle

// packages/runtime-core/src/apiWatch.ts // 使用数组同时侦听多个源 // overload: multiple sources w/ `as const` // watch([foo, bar] as const, () => {}) // somehow [...T] breaks when the type is readonly export function watch< T extends Readonly, Immediate extends Readonly = false >( source: T, cb: WatchCallback, MapSources>, options?: WatchOptions ): WatchStopHandle

// packages/runtime-core/src/apiWatch.ts // 数据源是一个 ref 类型的数据 或者是一个具有返回值的 getter 函数 // overload: single source + cb export function watch = false>( source: WatchSource, cb: WatchCallback, options?: WatchOptions ): WatchStopHandle export type WatchSource = Ref | ComputedRef | (() => T)

// packages/runtime-core/src/apiWatch.ts // 数据源是一个响应式的 obj 对象 // overload: watching reactive object w/ cb export function watch< T extends object, Immediate extends Readonly = false >( source: T, cb: WatchCallback, options?: WatchOptions ): WatchStopHandle

// packages/runtime-core/src/apiWatch.ts // implementation export function watch = false>( source: T | WatchSource, cb: any, options?: WatchOptions ): WatchStopHandle { if (__DEV__ && !isFunction(cb)) { warn( `\`watch(fn, options?)\` signature has been moved to a separate API. ` + `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` + `supports \`watch(source, cb, options?) signature.` ) } return doWatch(source as any, cb, options) }

export type WatchCallback = ( value: V, oldValue: OV, onCleanup: OnCleanup ) => any

export interface WatchOptionsBase extends DebuggerOptions { flush?: 'pre' | 'post' | 'sync' } export interface WatchOptions extends WatchOptionsBase { immediate?: Immediate deep?: boolean }

function doWatch( source: WatchSource | WatchSource[] | WatchEffect | object, cb: WatchCallback | null, { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ ): WatchStopHandle

 const instance = currentInstance let getter: () => any // 是否需要强制触发副作用函数执行 let forceTrigger = false // 侦听的是否是多个源 let isMultiSource = false

if (isRef(source)) { // 侦听的数据源是 ref getter = () => source.value // 判断数据源是否是浅响应 forceTrigger = isShallow(source) }

else if (isReactive(source)) { // 侦听的数据源是响应式数据 getter = () => source deep = true }

else if (isArray(source)) { // 侦听的数据源是一个数组，即同时侦听多个源 isMultiSource = true forceTrigger = source.some(isReactive) getter = () => // 遍历数组，判断每个源的类型 source.map(s => { if (isRef(s)) { // 侦听的数据源是 ref return s.value } else if (isReactive(s)) { // 侦听的数据源是响应式数据 return traverse(s) } else if (isFunction(s)) { // 侦听的数据源是一个具有返回值的 getter 函数 return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER) } else { __DEV__ && warnInvalidSource(s) } }) } 

else if (isFunction(source)) { // 处理 watch 和 watchEffect 的场景 // watch 的第二个参数可以是一个具有返回值的 getter 参数，第二个参数是一个回调函数 // watchEffect 的参数是一个 函数 // 侦听的数据源是一个具有返回值的 getter 函数 if (cb) { // getter with cb // 处理的是 watch 的场景 // 执行 source 函数，将执行结果赋值给 getter getter = () => callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER) } else { // no cb -> simple effect // 没有回调，即为 watchEffect 的场景 getter = () => { // 件实例已经卸载，则不执行，直接返回 if (instance && instance.isUnmounted) { return } // 清除依赖 if (cleanup) { cleanup() } // 执行 source 函数 return callWithAsyncErrorHandling( source, instance, ErrorCodes.WATCH_CALLBACK, [onCleanup] ) } } }

// 处理的是 watch 的场景 // 递归读取对象的属性值 if (cb && deep) { const baseGetter = getter getter = () => traverse(baseGetter()) }

// 清除副作用函数 let cleanup: () => void let onCleanup: OnCleanup = (fn: () => void) => { cleanup = effect.onStop = () => { callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP) } }