Vue3源码解析watch函数实例_vue.js_

// reactivity/src/effect.ts export interface DebuggerOptions { onTrack?: (event: DebuggerEvent) => void onTrigger?: (event: DebuggerEvent) => void } ​ // runtime-core/apiWatch.ts export interface WatchOptionsBase extends DebuggerOptions { flush?: 'pre' | 'post' | 'sync' } ​ export interface WatchOptions extends WatchOptionsBase { immediate?: Immediate deep?: boolean } 

// 副作用 export type WatchEffect = (onCleanup: OnCleanup) => void ​ export type WatchCallback = ( value: V, oldValue: OV, onCleanup: OnCleanup ) => any ​ type OnCleanup = (cleanupFn: () => void) => void 

// 单数据源类型：可以是 Ref 或 ComputedRef 或 函数 export type WatchSource = Ref | ComputedRef | (() => T) ​ // 多数据源类型 type MultiWatchSources = (WatchSource | object)[] ​ 

// watch的重载与实现 export function watch< T extends MultiWatchSources, Immediate extends Readonly = false >( sources: [...T], cb: WatchCallback, MapSources>, options?: WatchOptions ): WatchStopHandle ​ // 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 ​ // overload: single source + cb export function watch = false>( source: WatchSource, cb: WatchCallback, options?: WatchOptions ): WatchStopHandle ​ // overload: watching reactive object w/ cb export function watch< T extends object, Immediate extends Readonly = false >( source: T, cb: WatchCallback, options?: WatchOptions ): WatchStopHandle ​ // 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) } 

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

if (__DEV__ && !cb) { if (immediate !== undefined) { warn( `watch() "immediate" option is only respected when using the ` + `watch(source, callback, options?) signature.` ) } if (deep !== undefined) { warn( `watch() "deep" option is only respected when using the ` + `watch(source, callback, options?) signature.` ) } } ​ // 声明一个source参数不合法的警告函数 const warnInvalidSource = (s: unknown) => { warn( `Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` + `a reactive object, or an array of these types.` ) } // ... 

// 拿到当前实例，声明了空的getter，初始化关闭强制触发，且默认为单数据源的侦听 const instance = currentInstance let getter: () => any let forceTrigger = false let isMultiSource = false ​ // 根据侦听数据源的类型做相应的处理 if (isRef(source)) { getter = () => source.value forceTrigger = isShallow(source) } else if (isReactive(source)) { getter = () => source deep = true } else if (isArray(source)) { isMultiSource = true forceTrigger = source.some(s => isReactive(s) || isShallow(s)) getter = () => // 可见，数组成员只能是Ref、Reactive或者函数，其它类型无法通过校验，将引发告警 source.map(s => { if (isRef(s)) { return s.value } else if (isReactive(s)) { return traverse(s) } else if (isFunction(s)) { return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER) } else { __DEV__ && warnInvalidSource(s) } }) } else if (isFunction(source)) { 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 callWithAsyncErrorHandling( source, instance, ErrorCodes.WATCH_CALLBACK, [onCleanup] ) } } } else { getter = NOOP __DEV__ && warnInvalidSource(source) } 

// 2.x array mutation watch compat if (__COMPAT__ && cb && !deep) { const baseGetter = getter getter = () => { const val = baseGetter() if ( isArray(val) && checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance) ) { traverse(val) } return val } } 

export function traverse(value: unknown, seen?: Set) { if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) { return value } seen =
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：antDesign 自定义分页样式的实现代码_javascript技巧_
                                                                
下一篇：Vue中v-bind原理深入探究_vue.js_