【vue3源码】五、watch源码解析

参考代码版本：vue 3.2.37

官方文档：https://vuejs.org/

watch用来监听特定数据源，并在单独的回调函数中执行副作用。默认是惰性的——即回调仅在侦听源发生变化时被调用。
文件位置：packages/runtime-core/src/apiWatch.ts

使用示例

监听一个getter函数：

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (newVal, oldVal) => {
    //... 
  }
)

监听一个ref：

const count = ref(0)
watch(
  count,
  (newVal, oldVal) => {
    //... 
  }
)

监听多个数据源：

const foo = ref('')
const bar = ref('')
watch(
  [ foo, bar ],
  ([ newFoo, newBar ], [ oldFoo, oldBar ]) => {
    // ...
  }
)

深度监听：

const state = reactive({ count: 0 })
watch(
  () => state,
  () => {
    // ...
  },
  { deep: true }
)

// or
watch(state, () => {
  // ...
})

源码分析

export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): 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)
}

watch接收三个参数：source监听的源、cb回调函数、options监听配置，watch函数返回一个停止监听函数。。

在watch中调用了一个叫做doWatch的函数，与watch作用相似的watchEffect、watchPostEffect、watchSyncEffect内部也都使用了这个doWatch函数。

export function watchEffect(
  effect: WatchEffect,
  options?: WatchOptionsBase
): WatchStopHandle {
  return doWatch(effect, null, options)
}

export function watchPostEffect(
  effect: WatchEffect,
  options?: DebuggerOptions
) {
  return doWatch(
    effect,
    null,
    (__DEV__
      ? Object.assign(options || {}, { flush: 'post' })
      : { flush: 'post' }) as WatchOptionsBase
  )
}

export function watchSyncEffect(
  effect: WatchEffect,
  options?: DebuggerOptions
) {
  return doWatch(
    effect,
    null,
    (__DEV__
      ? Object.assign(options || {}, { flush: 'sync' })
      : { flush: 'sync' }) as WatchOptionsBase
  )
}

可见doWatch是watch API的核心，接下来重点研究doWatch的实现。

doWatch

doWatch源码过长，这里就不搬运了，在分析过程中，会展示相关代码。

doWatch函数接收三个参数：source监听的数据源，cb回调函数，options：监听配置。doWatch返回一个停止监听函数。

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

首先需要对immediate、deep做校验，如果cb为null，immediate、deep不为undefined进行提示。

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.`
    )
  }
}

紧接着声明了一些变量：

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.`
  )
}

// 当前组件实例
const instance = currentInstance
// 副作用函数，在初始化effect时使用
let getter: () => any
// 强制触发监听
let forceTrigger = false
// 是否为多数据源。
let isMultiSource = false

然后根据传入的soure确定getter、forceTrigger、isMultiSource。这里分了5个分支：

• 如果source是ref类型，getter是个返回source.value的函数，forceTrigger取决于source是否是浅层响应式。

if (isRef(source)) {
  getter = () => source.value
  forceTrigger = isShallow(source)
}

• 如果source是reactive类型，getter是个返回source的函数，并将deep设置为true。

if (isReactive(source)) {
  getter = () => source
  deep = true
}

• 如果source是个数组，将isMultiSource设为true，forceTrigger取决于source是否有reactive类型的数据，getter函数中会遍历source，针对不同类型的source做不同处理。

if (isArray(source)) {
  isMultiSource = true
  forceTrigger = source.some(isReactive)
  getter = () =>
    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)
      }
    })
}

• 如果source是个function。存在cb的情况下，getter函数中会执行source，这里source会通过callWithErrorHandling函数执行，在callWithErrorHandling中会处理source执行过程中出现的错误；不存在cb的话，在getter中，如果组件已经被卸载了，直接return，否则判断cleanup（cleanup是在watchEffect中通过onCleanup注册的清理函数），如果存在cleanup执行cleanup，接着执行source，并返回执行结果。source会被callWithAsyncErrorHandling包装，该函数作用会处理source执行过程中出现的错误，与callWithErrorHandling不同的是，callWithAsyncErrorHandling会处理异步错误。

if (isFunction(source)) {
  if (cb) {
    getter = () =>
      callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
  } else {
    // watchEffect
    getter = () => {
      // 如果组件实例已经卸载，直接return
      if (instance && instance.isUnmounted) {
        return
      }
      // 如果清理函数，则执行清理函数
      if (cleanup) {
        cleanup()
      }
      // 执行source，传入onCleanup，用来注册清理函数
      return callWithAsyncErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,
        [onCleanup]
      )
    }
  }
}

callWithErrorHandling函数可以接收四个参数：fn待执行的函数、instance组件实例、typefn执行过程中出现的错误类型、argsfn执行所需的参数。

export function callWithErrorHandling(
  fn: Function,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
) {
  let res
  try {
    res = args ? fn(...args) : fn()
  } catch (err) {
    handleError(err, instance, type)
  }
  return res
}

callWithAsyncErrorHandling的参数与callWithErrorHandling类似，与callWithErrorHandling不同的是，callWithAsyncErrorHandling可以接受一个fn数组。

export function callWithAsyncErrorHandling(
  fn: Function | Function[],
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
): any[] {
  if (isFunction(fn)) {
    const res = callWithErrorHandling(fn, instance, type, args)
    if (res && isPromise(res)) {
      res.catch(err => {
        handleError(err, instance, type)
      })
    }
    return res
  }

  const values = []
  for (let i = 0; i < fn.length; i++) {
    values.push(callWithAsyncErrorHandling(fn[i], instance, type, args))
  }
  return values
}

• 其他情况，getter会被赋为一个空函数

getter = NOOP
__DEV__ && warnInvalidSource(source)

接下来会对vue2的数组的进行兼容性处理，breaking-changes/watch

if (__COMPAT__ && cb && !deep) {
  const baseGetter = getter
  getter = () => {
    const val = baseGetter()
    if (
      isArray(val) &&
      checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
    ) {
      traverse(val)
    }
    return val
  }
}

如果存在cb并且deep为true，那么需要对数据进行深度监听，这时，会重新对getter赋值，在新的getter函数中递归访问之前getter的返回结果。

if (cb && deep) {
  const baseGetter = getter
  getter = () => traverse(baseGetter())
}

traverse实现，递归遍历所有属性，seen用于防止循环引用问题。

export function traverse(value: unknown, seen?: Set<unknown>) {
  // 如果value不是对象或value不可被转为代理（经过markRaw处理），直接return value
  if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) {
    return value
  }
  // sean用于暂存访问过的属性，防止出现循环引用的问题
  // 如：
  // const obj = { a: 1 }
  // obj.b = obj
  seen = seen || new Set()
  // 如果seen中已经存在了value，意味着value中存在循环引用的情况，这时return value
  if (seen.has(value)) {
    return value
  }
  // 添加value到seen中
  seen.add(value)
  // 如果是ref，递归访问value.value
  if (isRef(value)) {
    traverse(value.value, seen)
  } else if (isArray(value)) { // 如果是数组，遍历数组并调用traverse递归访问元素内的属性
    for (let i = 0; i < value.length; i++) {
      traverse(value[i], seen)
    }
  } else if (isSet(value) || isMap(value)) { // 如果是Set或Map，调用traverse递归访问集合中的值
    value.forEach((v: any) => {
      traverse(v, seen)
    })
  } else if (isPlainObject(value)) { // 如果是原始对象，调用traverse递归方位value中的属性
    for (const key in value) {
      traverse((value as any)[key], seen)
    }
  }
  // 最后需要返回value
  return value
}

到此，getter函数（getter函数中会尽可能访问响应式数据，尤其是deep为true并存在cb的情况时，会调用traverse完成对source的递归属性访问）、forceTrigger、isMultiSource已经被确定，接下来声明了两个变量：cleanup、onCleanup。onCleanup会作为参数传递给watchEffect中的effect函数。当onCleanup执行时，会将他的参数通过callWithErrorHandling封装赋给cleanup及effect.onStop（effect在后文中创建）。

let cleanup: () => void
let onCleanup: OnCleanup = (fn: () => void) => {
  cleanup = effect.onStop = () => {
    callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
  }
}

紧接着是一段SSR处理过程：

if (__SSR__ && isInSSRComponentSetup) {
  // we will also not call the invalidate callback (+ runner is not set up)
  onCleanup = NOOP
  if (!cb) {
    getter()
  } else if (immediate) {
    callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
      getter(),
      isMultiSource ? [] : undefined,
      onCleanup
    ])
  }
  return NOOP
}

然后声明了一个oldValue和job变量。如果是多数据源oldValue是个数组，否则是个对象。

job函数的作用是触发cb(watch)或执行effect.run(watchEffect)。job函数中会首先判断effect的激活状态，如果未激活，则return。然后判断如果存在cb，调用effet.run获取最新值，下一步就是触发cb，这里触发cb需要满足以下条件的任意一个条件即可：

1. 深度监听deep===true
2. 强制触发forceTrigger===true
3. 如果多数据源，newValue中存在与oldValue中的值不相同的项（利用Object.is判断）；如果不是多数据源，newValue与oldValue不相同。
4. 开启了vue2兼容模式，并且newValue是个数组，并且开启了WATCH_ARRAY

只要符合上述条件的任意一条，便可已触发cb，在触发cb之前会先调用cleanup函数。执行完cb后，需要将newValue赋值给oldValue。

如果不存在cb，那么直接调用effect.run即可。

let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE
const job: SchedulerJob = () => {
  if (!effect.active) {
    return
  }
  if (cb) {
    const newValue = effect.run()
    if (
      deep ||
      forceTrigger ||
      (isMultiSource
        ? (newValue as any[]).some((v, i) =>
          hasChanged(v, (oldValue as any[])[i])
        )
        : hasChanged(newValue, oldValue)) ||
      (__COMPAT__ &&
        isArray(newValue) &&
        isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
    ) {
      if (cleanup) {
        cleanup()
      }
      callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
        newValue,
        // 如果oldValue为INITIAL_WATCHER_VALUE，说明是第一次watch，那么oldValue是undefined
        oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
        onCleanup
      ])
      oldValue = newValue
    }
  } else {
    effect.run()
  }
}
job.allowRecurse = !!cb

接下来声明了一个调度器scheduler，在scheduler中会根据flush的不同决定job的触发时机：

let scheduler: EffectScheduler
if (flush === 'sync') {
  scheduler = job as any 
} else if (flush === 'post') {
  // 延迟执行，将job添加到一个延迟队列，这个队列会在组件挂在后、更新的生命周期中执行
  scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
} else {
  // 默认 pre，将job添加到一个优先执行队列，该队列在挂载前执行
  scheduler = () => {
    if (!instance || instance.isMounted) {
      queuePreFlushCb(job)
    } else {
      job()
    }
  }
}

此时，getter与scheduler准备完成，创建effect实例。

const effect = new ReactiveEffect(getter, scheduler)

创建effect实例后，开始首次执行副作用函数。这里针对不同情况有多个分支：

• 如果存在cb的情况
  • 如果immediate为true，执行job，触发cb
  • 否则执行effect.run()进行依赖的收集，并将结果赋值给oldValue
• 如果flush===post，会将effect.run推入一个延迟队列中
• 其他情况，也就是watchEffect，则会执行effect.run进行依赖的收集

if (cb) {
  if (immediate) {
    job()
  } else {
    oldValue = effect.run()
  }
} else if (flush === 'post') {
  queuePostRenderEffect(
    effect.run.bind(effect),
    instance && instance.suspense
  )
} else {
  effect.run()
}

最后，返回一个函数，这个函数的作用是停止watch对数据源的监听。在函数内部调用effect.stop()将effect置为失活状态，如果存在组件实例，并且组件示例中存在effectScope，那么需要将effect从effectScope中移除。

return () => {
  effect.stop()
  if (instance && instance.scope) {
    remove(instance.scope.effects!, effect)
  }
}

watchEffect、watchSyncEffect、watchPostEffect

watchEffect、watchSyncEffect、watchPostEffect的实现均是通过doWatch实现。

export function watchEffect(
  effect: WatchEffect,
  options?: WatchOptionsBase
): WatchStopHandle {
  return doWatch(effect, null, options)
}

export function watchPostEffect(
  effect: WatchEffect,
  options?: DebuggerOptions
) {
  return doWatch(
    effect,
    null,
    (__DEV__
      ? Object.assign(options || {}, { flush: 'post' })
      : { flush: 'post' }) as WatchOptionsBase
  )
}

export function watchSyncEffect(
  effect: WatchEffect,
  options?: DebuggerOptions
) {
  return doWatch(
    effect,
    null,
    (__DEV__
      ? Object.assign(options || {}, { flush: 'sync' })
      : { flush: 'sync' }) as WatchOptionsBase
  )
}

watch与watchEffect的区别

watch只会追踪在source中明确的数据源，不会追踪回调函数中访问到的东西。而且只在数据源发生变化后触发回调。watch会避免在发生副作用时追踪依赖（当发生副作用时，会执行调度器，在调度器中会将job推入不同的任务队列，达到控制回调函数的触发时机的目的），因此，我们能更加精确地控制回调函数的触发时机。

watchEffect，会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式property

示例分析

为了更好地理解watch及watchEffect的流程，我们以下面几个例子来理解watch及watchEffect。

例1

const state = reactive({ str: 'foo', obj: { num: 1 } })
const flag = ref(true)

watch(
  [ flag, () => state.obj ],
  ([ newFlag, newObj ], [ oldFlag, oldObj ]) => {
    console.log(newFlag)
    console.log(newObj.num)
    console.log(oldFlag)
    console.log(oldObj && oldObj.num)
  },
  {
    immediate: true,
    flush: 'sync'
  }
)

state.obj.num = 2

state.obj = {
  num: 2
}

在watch中调用doWatch方法，在doWatch会构造getter函数，因为所监听的数据源是个数组，所以getter函数返回值也是个数组，因为数据源的第一项是个ref，所以getter返回值第一项是ref.value，数据源的第二项是个function，所以getter返回值第二项是() => state.obj的返回值，也就是state.obj，由于我们未指定depp，最终生成的getter是() => [ref.value, state.obj]。

然后利用getter与scheduler生成effect，因为我们指定了immediate: true，所以会立即执行job函数，在job函数中，会执行effect.run()（这个过程中最终执行getter函数，而在执行getter函数的过程中会被对应响应式对象的proxy所拦截，进而收集依赖），然后将effect.run()的结果赋值给newValue。然后对位比较newValue与oldValue中的元素，因为oldValue此时是个空数组，所以会触发cb，在cb触发过程中将newValue、oldValue依次传入，此时打印true 1 undefined undefined，当cb执行完，将newValue赋值为oldValue。

当执行state.obj.num = 2时。因为在上一次的依赖收集过程中（也就是getter执行过程中），并没有访问到num属性，也就不会收集它的依赖，所以该步骤不会影响到watch。

当state.obj = { num: 2 }时，会触发到obj对应的依赖，而在依赖触发过程中会执行调度器，因为flush为sync，所以调度器就是job，当执行job时，通过effect.run()得到newValue，因为这时oldValue中的state.value与newValue中的state.value已经不是同一个对象了，所以触发cb。打印true 2 true 2。

为什么第二次打印newObj.num与oldObj.num相同？因为oldValue中的oldObj保存的是state.obj的引用地址，一旦state.obj发生改变，oldValue也会对应改变。

例2

const state = reactive({ str: 'foo', obj: { num: 1 } })
const flag = ref(true)

watchEffect(() => {
  console.log(flag.value)
  console.log(state.obj.num)
})


state.obj.num = 2

state.obj = {
  num: 3
}

与例1相同，例2先生成getter（getter中会调用source）与scheduler，然后生成effect。因为watchEffect是没有cb参数，也未指定flush，所以会直接执行effct.run()。在effect.run执行过程中，会调用source，在source执行过程中会将effect收集到flag.dep及targetMap[toRaw(state)].obj、targetMap[toRaw(state).obj].num中。所以第一次打印true 1。

当执行state.obj.num = 2，会触发targetMap[toRaw(state).obj].num中的依赖，也就是effect，在触发依赖过程中会执行effect.scheduler，将job推入一个pendingPreFlushCbs队列中。

当执行state.obj = { num: 3 }，会触发targetMap[toRaw(state)].obj中的依赖，也就是effect，在触发依赖过程中会执行effect.scheduler，将job推入一个pendingPreFlushCbs队列中。

最后会执行pendingPreFlushCbs队列中的job，在执行之前会对pendingPreFlushCbs进行去重，也就是说最后只会执行一个job。最终打印true 3。

总结

watch、watchEffect、watchSyncEffect、watchPostEffect的实现均是通过一个doWatch函数实现。

dowatch中会首先生成一个getter函数。如果是watchAPI，那么这个getter函数中会根据传入参数，访问监听数据源中的属性（可能会递归访问对象中的属性，取决于deep），并返回与数据源数据类型一致的数据（如果数据源是ref类型，getter函数返回ref.value；如果数据源类型是reactive，getter函数返回值也是reactive；如果数据源是数组，那么getter函数返回值也应该是数组；如果数据源是函数类型，那么getter函数返回值是数据源的返回值）。如果是watchEffect等API，那么getter函数中会执行source函数。

然后定义一个job函数。如果是watch，job函数中会执行effect.run获取新的值，并比较新旧值，是否执行cb；如果是watchEffect等API，job中执行effect.run。那么如何只监听到state.obj.num的变换呢？

当声明完job，会紧跟着定义一个调度器，这个调度器的作用是根据flush将job放到不同的任务队列中。

然后根据getter与调度器scheduler初始化一个ReactiveEffect`实例。

接着进行初始化：如果是watch，如果是立即执行，则马上执行job，否则执行effect.run更新oldValue；如果flush是post，会将effect.run函数放到延迟队列中延迟执行；其他情况执行effect.run。

最后返回一个停止watch的函数。