Vue3 Watch API 到底是怎么实现的?

·  阅读 508

我正在参与掘金创作者训练营第4期,点击了解活动详情,一起学习吧!

前言

在之前的文章,我们已经介绍过 vue3 的响应式原理。如果还没看过的同学,强烈建议先看看《六千字详解!vue3 响应式是如何实现的?》,该文章用 vue3 ref 的例子,详细地介绍了响应式原理的实现。

而这篇则是在响应式原理的基础上,进一步介绍 Vue3 的另外一个 API —— watch

watch 用法

Vue3 的 watchApi 主要有两类:watch 和 watchEffect。(watchPostEffect 和 watchSyncEffect 只是 watchEffect 的不同参数 flush 的别名)

watch 的用法

  1. 侦听单一源
// 侦听一个 getter 函数
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})
  1. 侦听多个源
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

watchEffect 用法

立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)	

watch 的测试用例

it('effect', async () => {
  const state = reactive({ count: 0 })
  let dummy
  watchEffect(() => {
    dummy = state.count
  })
  expect(dummy).toBe(0)

  state.count++
  // dummy 没有立即被修改
  expect(dummy).toBe(0)
  await nextTick()
  // nextTick 之后 dummy 才会被修改
  expect(dummy).toBe(1)
})

it('watching single source: getter', async () => {
  const state = reactive({ count: 0 })
  let dummy
  watch(
    () => state.count,
    (count, prevCount) => {
      dummy = [count, prevCount]
      // assert types
      count + 1
      if (prevCount) {
        prevCount + 1
      }
    }
  )
  state.count++
  // dummy 没有立即被赋值
  expect(dummy).toBe(undefined)
  await nextTick()
  // nextTick 之后 dummy 才会被修改
  expect(dummy).toMatchObject([1, 0])
})

从上面测试用例中,我们可以看出,响应式变量被修改后,并不是马上执行 watchEffect 和 watch 的回调函数,而是在 nextTick 只有才执行完成。

为什么会延迟执行 watch 回调?

考虑以下代码:

it('watch 最终的值没有变,则不执行 watch 回调', async () => {
  const state = reactive({ count: 0 })
  let dummy = 0
  watch(
    () => state.count,
    (count) => {
     	dummy++
    }
  )
  state.count++
  state.count--
  // dummy 没有立即被赋值
  expect(dummy).toBe(0)
  await nextTick()
  // nextTick 之后 watch 回调没有被执行
  expect(dummy).toBe(0)
})

最终 state.count 的值没有变,没有执行 watch 回调(这个行为是 Vue watch API 所定义的),而不是执行两遍 watch 回调

  • 要实现【watch 的最终值不变,则不执行 watch 回调】的行为,就必须要延迟执行,就需要在当前的所有 js 代码(整个 js 执行栈)都执行完之后,再对值的变化进行判断。
  • 防止多次修改响应式变量,导致多次执行 watch 回调,导致 vue3 的响应式链路混乱,起到防抖的作用。要知道,watch 的回调,还可能引起其他响应式变量的变化

这个与我们在《六千字详解!vue3 响应式是如何实现的?》文章中,提到过,effect 函数,有什么区别

it('should be reactive', () => {
    const a = ref(1)
    let dummy
    let calls = 0
    effect(() => {
        calls++
        dummy = a.value
    })
    expect(calls).toBe(1)
    expect(dummy).toBe(1)
    a.value = 2
    expect(calls).toBe(2)
    expect(dummy).toBe(2)
})

与 watchEffect 的行为非常的相似,他们主要的区别是:

effect 函数watchEffect 函数
副作用函数的执行时机响应式变量变化后,立即执行响应式变量变化后,延迟执行
作用仅仅用于响应式变量开发过程中的调试1. Vue3 官方提供的一个 API,与组件状态耦合
(组件销毁时,watchEffect 不再执行)
2. 延迟执行,目的是为了确定组件更新前,判断响应式数据是否被改变
(可能一开始被改变,但是后来又被改回去,此时不需要更新)

源码解析

watchEffect 和 watch 的实现,都是 doWatch 函数

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

export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {
  return doWatch(source as any, cb, options)
}

doWatch 的参数如下:

  • source:为 watch / watchEffect 的第一个参数,该参数的类型非常多,在 doWatch 内部会进行标准化处理
  • cb:仅仅 watch 有该 cb 回调
  • options:watch 的配置,有 immediate、deep、flush

doWatch

doWatch 函数主要分为以下几个部分:

  1. 标准化 source,组装成为 getter 函数
  2. 组装 job 函数。判断侦听的值是否有变化,有变化则执行 getter 函数和 cb 回调
  3. 组装 scheduler 函数,scheduler 负责在合适的时机调用 job 函数(根据 options.flush,即副作用刷新的时机),默认在组件更新前执行
  4. 开启侦听
  5. 返回停止侦听函数

getter、scheduler、job、cb 它们之间的关系

image-20220123210417284

这个图目前看不懂没有关系,后面还会出现并解释

doWatch 大概代码结构如下(有删减):

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
 
  // 1. 根据 source 的类型组装 getter    
  let getter: () => any 
  if (isRef(source)) {
    getter = ...
  } else if (isReactive(source)) {
    getter = ...
  } else {
      ...
  }

  // 2. 组装 job
  const job: SchedulerJob = () => {
	// ...
  }

  // 3. 组装 scheduler
  let scheduler: EffectScheduler = ...

  // 4. 开启侦听,侦听的是 getter 函数
  const effect = new ReactiveEffect(getter, scheduler)
  effect.run()

  // 5. 返回停止侦听函数
  return () => {
    effect.stop()
    if (instance && instance.scope) {
      remove(instance.scope.effects!, effect)
    }
  }
}

可以看出,watch 响应式也是通过 ReactiveEffect 对象实现的,不了解 ReactiveEffect 对象的同学,可以看看该文章:《六千字详解!vue3 响应式是如何实现的?》

这里也大概回顾一下 ReactiveEffect 对象的作用:

  1. ReactiveEffect,接受 fn 和 scheduler 参数。ReactiveEffect 被创建时,会立即执行 fn

  2. 当 fn 函数中使用到响应式变量(如 ref)时,该响应式变量就会用数组收集 ReactiveEffect 对象的引用

    image-20211231112331231

  3. 响应式变量被改变时,会触发所有的 ReactiveEffect 对象,触发规则如下:

    • 如果没有 scheduler 参数,则执行ReactiveEffect 的 fn
    • 如果有 scheduler 参数,则执行 scheduler,这时需要在 scheduler 中手动调用 fn
  4. 执行 fn 时,使用到响应式变量,依赖又会被重新收集

接下来,我们会从 ReactiveEffect 作为切入点,进行介绍(并非按照代码顺序介绍)

开启侦听

// 开启侦听,侦听的是 getter 函数
const effect = new ReactiveEffect(getter, scheduler)

这里会立即调用 getter 函数,进行依赖收集。

如果依赖有变化,则执行 scheduler 函数

image-20220125210032545

getter 函数

getter 函数是最终被侦听的函数,即函数里面用到的响应式变量的改变,都会触发执行 scheduler 函数

由于 watch/watchEffect 的入参,多种多样,doWatch 在处理时,需要进行标准化处理

下面是 getter 部分的源码:

// 节选自 doWatch 内部实现
const instance = currentInstance
let getter: () => any
let forceTrigger = false   // 标记为 forceTrigger ,则强制执行 cb,无论 getter 返回值是否改变
let isMultiSource = false  // 标记是否为多侦听源

if (isRef(source)) {
  // ref 处理
  // 执行 getter,就会获取 ref 的值,从而 track 收集依赖
  getter = () => source.value
  forceTrigger = !!source._shallow
} else if (isReactive(source)) {
  // reactive 对象
  getter = () => source
  // reactive 需要深度遍历
  deep = true
} else if (isArray(source)) {
  // 侦听多个源,source 为数组。需要设置 isMultiSource 标记为多数据源。
  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)
      }
    })
} else if (isFunction(source)) {
  // source 是函数
  if (cb) {
    // 直接用错误处理函数包一层,getter 函数实际上就是直接运行 source 函数
    // callWithErrorHandling 中做了一些 vue 错误信息的统一处理,有更好的错误提示
    getter = () =>
      callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
  } else {
    // 没有 cb,最后还是直接运行 source
    getter = () => {
      if (instance && instance.isUnmounted) {
        return
      }
      if (cleanup) {
        cleanup()
      }
      return callWithAsyncErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,
        [onInvalidate]
      )
    }
  }
} else {
  // 兜底处理,到这里证明传入 source 的值是错误的,开发环境下会警告
  // 如 watch(ref.value,()={}),而此时 ref.value === undefined
  getter = NOOP
  __DEV__ && warnInvalidSource(source)
}

// 如果深度监听,则需要深度遍历整个 getter 的返回值
// 例如 reactive,需要访问对象内部的每一个属性,需要进行深度遍历访问
// 当执行 getter 时,由于深度访问了每一个属性,因此每个属性都会 track 收集依赖
if (cb && deep) {
    const baseGetter = getter
    getter = () => traverse(baseGetter())
}

总的来说,这部分就是根据 source 的不同类型,标准化包装成 getter 函数

  • ref:() => source.value
  • reactive:() => traverse(source)
  • 数组:分别根据子元素类型,包装成 getter 函数
  • 函数:用 callWithErrorHandling 包装,实际上就是直接调用 source 函数

traverse 的作用是什么?

对于 reactive 对象或设置了参数 deep,需要侦听到深层次的变化,这需要深度遍历整个对象,深层次的访问其所有的响应式变量,并收集依赖。

// 深度遍历对象,只是访问响应式变量,不做任何处理
// 访问就会触发响应式变量的 getter,从而触发依赖收集
export function traverse(value: unknown, seen?: Set<unknown>) {
  if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) {
    return value
  }
  seen = seen || new Set()
  if (seen.has(value)) {
    return value
  }
  seen.add(value)
  if (isRef(value)) {
    traverse(value.value, seen)
  } else if (isArray(value)) {
    // 继续深入遍历数组
    for (let i = 0; i < value.length; i++) {
      traverse(value[i], seen)
    }
  } else if (isSet(value) || isMap(value)) {
    value.forEach((v: any) => {
      traverse(v, seen)
    })
  } else if (isPlainObject(value)) {
    // 是对象则继续深入遍历
    for (const key in value) {
      traverse((value as any)[key], seen)
    }
  }
  return value
}

scheduler 函数

当 getter 中侦听的响应式变量发生改变时,就会执行 scheduler 函数

scheduler 用于控制 job 的执行时机,scheduler 会在对应的时机,执行 job,该时机取决于 options 的 flush 参数(pre、sync、post)

// 如果有 cb,则允许 job 递归
// 如:cb 导致 getter 又被改变 trigger 了,这时候应该允许继续又将 cb 加入执行队列
job.allowRecurse = !!cb

let scheduler: EffectScheduler
if (flush === 'sync') {
  // 同步调用 job,官方不建议同步调用
  scheduler = job as any // the scheduler function gets called directly
} else if (flush === 'post') { 
  // 异步调用 job,在组件 DOM 更新之后
  scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
} else {
  // default: 'pre'
  scheduler = () => {
    if (!instance || instance.isMounted) {
      // 异步调用 job,在组件 DOM 更新前
      queuePreFlushCb(job)
    } else {
      // 组件未 mounted 时,watch cb 是同步调用的
      job()
    }
  }
}

queuePostRenderEffectqueuePreFlushCb 在该文章不会详细介绍,只需要知道,这两个函数是在 DOM 更新前/后执行传入的函数(这里是 job 函数)即可,这两个函数是 Vue 调度系统的一部分,详情见文章《七千字深度剖析 Vue3 的调度系统》

三个执行时机分别有什么区别

  • pre::组件 DOM 更新前,此时拿到的是更新后的 DOM 对象
  • post:组件 DOM 更新后,此时拿到的是更新后的 DOM 对象
  • sync:在响应式变量改变时,同步执行 job,此时 watch 的 cb 回调还没执行,组件 DOM 也没有更新。这种方式是低效的,因为没有延迟执行,就失去了防抖的效果,也没有办法判断最终的值是否发生变化。尽量避免使用

组装 job 函数

Job 函数在 scheduler 函数中被直接或间接调用

job 负责执行 effect.run(即执行 getter 函数重新收集依赖)和 cb(watch 才有),对应的是图中的红色部分

image-20220125205911675

let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE
const job: SchedulerJob = () => {
  // 如果侦听已经停止,则直接 return
  if (!effect.active) {
    return
  }
  if (cb) {
    // watch(source, cb) 会走这个分支
    // 在 scheduler 中需要手动直接执行 effect.run,这里会执行 getter 函数
    // 先执行 getter 获取返回值,如果返回值变化,才执行 cb。
    const newValue = effect.run()
    
    // 判断是否需要执行 cb
    // 1. getter 函数的值被改变,没有发生改变则不执行 cb 回调
    // 2. 设置了 deep 深度监听
    // 3. forceTrigger 为 true
    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))
    ) {
      // 执行 cb,并传入 newValue、oldValue、onInvalidate
      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,
        onInvalidate
      ])
      // 缓存 getter 的返回值
      oldValue = newValue
    }
  } else {
    // watchEffect
    // 在 scheduler 中需要手动直接执行 effect.run,这里会执行 getter 函数
    effect.run()
  }
}

返回停止侦听函数

// 返回一个停止侦听 effect 的函数
return () => {
  effect.stop()
  // 移除当前组件上的对应的 effect
  if (instance && instance.scope) {
    remove(instance.scope.effects!, effect)
  }
}

调用该函数会清除 watch

其他阅读

最后

如果这篇文章对您有所帮助,请帮忙点个赞👍,您的鼓励是我创作路上的最大的动力。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改