VUE 3.0源码之watch和watchEffect

た入场券 2022-12-20 03:27 143阅读 0赞

## 1.watch和watchEffect ##

这两都是直接调用doWatch方法，唯一区别就是第二个参数不同。

export function watchEffect(
      effect: WatchEffect,
      options?: WatchOptionsBase
    ): WatchStopHandle { 
      return doWatch(effect, null, options)
    }
    export function watch<T = any>(
      source: WatchSource<T> | WatchSource<T>[],
      cb: WatchCallback<T>,
      options?: WatchOptions
    ): WatchStopHandle { 
      // 省略参数校验
      return doWatch(source, cb, options)
    }

## 2.doWatch ##

function doWatch(
      source: WatchSource | WatchSource[] | WatchEffect,
      cb: WatchCallback | null,
      {  immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
    ): WatchStopHandle { 
      // 当前组件实例
      const instance = currentInstance
      // 将不同类型的监视对象封装成函数，并在函数内部触发相关get，类似计算属性
      let getter: () => any
      if (isArray(source)) { 
        getter = () =>
          source.map(s => { 
            if (isRef(s)) { 
              return s.value
            } else if (isReactive(s)) { 
              // 触发proxy所有不同层级的get
              return traverse(s)
            } else if (isFunction(s)) { 
              // 直接执行，但会捕获错误
              return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
            } else { 
              __DEV__ && warnInvalidSource(s)
            }
          })
      } else if (isRef(source)) { 
        getter = () => source.value
      } else if (isReactive(source)) { 
        // 强制深层监听
        getter = () => source
        deep = true
      } else if (isFunction(source)) { 
        if (cb) { 
          getter = () =>
            callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
        } else { 
          getter = () => { 
            if (instance && instance.isUnmounted) { 
              return
            }
            // 在每次触发getter时，调用onInvalidate传入的函数
            if (cleanup) { 
              cleanup()
            }
            return callWithErrorHandling(
              source,
              instance,
              ErrorCodes.WATCH_CALLBACK,
              [onInvalidate]
            )
          }
        }
      } else { 
        getter = NOOP
        __DEV__ && warnInvalidSource(source)
      }
      
      if (cb && deep) { 
        // 如果是watch且是deep则递归触发get
        const baseGetter = getter
        getter = () => traverse(baseGetter())
      }
      
      let cleanup: () => void
      const onInvalidate: InvalidateCbRegistrator = (fn: () => void) => { 
        // 1、副作用即将重新执行时
        // 2、侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect，则在组件卸载时)
        cleanup = runner.options.onStop = () => { 
          callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
        }
      }
      // 如果是ssr且在node则不做监听，只执行一遍
      if (__NODE_JS__ && isInSSRComponentSetup) { 
        if (!cb) { 
          getter()
        } else if (immediate) { 
          callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
            getter(),
            undefined,
            onInvalidate
          ])
        }
        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)) { 
              if (cleanup) { 
                cleanup()
              }
              callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
                newValue,
                // 第一次触发传undefined做旧值
                oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
                onInvalidate
              ])
              oldValue = newValue
            }
          }
        : void 0
        
      let scheduler: (job: () => any) => void
      if (flush === 'sync') { 
        // 会在内部响应式更新后直接触发
        // const invoke = (fn: Function) => fn()
        scheduler = invoke
      } else if (flush === 'pre') { 
        // 组件更新前执行
        scheduler = job => { 
          if (!instance || instance.isMounted) { 
            // 异步队列
            queueJob(job)
          } else { 
            // pre的时候，第一次调用要在mounted前，所以直接同步调用
            job()
          }
        }
      } else { 
        // 组件更新后运行
        scheduler = job => queuePostRenderEffect(job, instance && instance.suspense)
      }
      
      // 生成一个effect用于依赖收集和注册
      const runner = effect(getter, { 
        lazy: true,
        computed: true,
        onTrack,
        onTrigger,
        // 如果是watch则运行applyCb，否则运行runner
        scheduler: applyCb ? () => scheduler(applyCb) : scheduler
      })
      
      // 将副作用添加到当前实例的副作用列表中
      recordInstanceBoundEffect(runner)
      
      if (applyCb) { 
        if (immediate) { 
          applyCb()
        } else { 
          oldValue = runner()
        }
      } else { 
        runner()
      }
      
      // 返回一个函数用于停用该副作用
      return () => { 
        stop(runner)
        if (instance) { 
          remove(instance.effects!, runner)
        }
      }
    }

## 2、总结 ##

> #### watch和watchEffect的区别 ####

*  watchEffect和computed比较像，都是通过执行副作用函数获取要监听的数据源，而watch是通过第一参数获取要监听的数据源
 *  watch的参数有3个（数据源，副作用函数，配置），watchEffect只有两个（副作用函数，配置）
 *  watch的副作用函数接收的参数比watchEffect多两个（新旧值）
 *  deep和immediate只对watch有用

> #### watch和watchEffect的相同点 ####

*  watch 与 watchEffect共享停止侦听，清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、副作用刷新时机和侦听器调试行为。
 *  都能通过返回的停止函数停止监听
 *  都有onInvalidate传参
 *  相同的副作用刷新时机
 *  都有flush（刷新时机）、onTrack（被依赖收集时）、onTrigger（被依赖触发时）