Vue 生命周期钩子源码解析

引入

笔者最近想给自己的一个开源库增加生命周期钩子，从而能够让开发者在特定阶段运行自己的代码，增加库的可扩展性。于是我学习了Vue3生命周期钩子的源码，对其产生了一些理解和思考。

生命周期钩子（以下简称钩子函数）的源码主要分为两部分：

注入。注入过程不会调用钩子函数的回调，只是把用户传入的回调注册到组件实例上
触发。这部分会根据钩子函数的类别，以同步或异步的方式调用钩子函数的回调

本文将主要介绍钩子函数的注入和触发过程，并回答以下几个主要问题：

钩子函数是如何注入到组件实例当中的
在组件实例的生命周期当中，钩子函数是如何触发的

本文最后写了我的一点思考与总结。

注入

这部分的代码都位于runtime-core/src/apiLifecycle.ts中。

export const createHook =
  <T extends Function = () => any>(lifecycle: LifecycleHooks) =>
  (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
    // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
    (!isInSSRComponentSetup || lifecycle === LifecycleHooks.SERVER_PREFETCH) &&
    injectHook(lifecycle, (...args: unknown[]) => hook(...args), target)

export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
export const onMounted = createHook(LifecycleHooks.MOUNTED)
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
export const onUpdated = createHook(LifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)

通过查看源码我们可以发现，常用的钩子函数（如onBeforeMount、onMounted等）都是通过createHook函数得到，当我们调用钩子函数时，实际上并没有执行我们传给钩子函数的回调，而是执行了injectHook函数，把回调注册到了组件实例上。

export function injectHook(
  type: LifecycleHooks,
  hook: Function & { __weh?: Function },
  target: ComponentInternalInstance | null = currentInstance,
  prepend: boolean = false
): Function | undefined {
  if (target) {
    const hooks = target[type] || (target[type] = [])
    // cache the error handling wrapper for injected hooks so the same hook
    // can be properly deduped by the scheduler. "__weh" stands for "with error
    // handling".
    const wrappedHook =
      hook.__weh ||
      (hook.__weh = (...args: unknown[]) => {
        if (target.isUnmounted) {
          return
        }
        // disable tracking inside all lifecycle hooks
        // since they can potentially be called inside effects.
        pauseTracking()
        // Set currentInstance during hook invocation.
        // This assumes the hook does not synchronously trigger other hooks, which
        // can only be false when the user does something really funky.
        setCurrentInstance(target)
        const res = callWithAsyncErrorHandling(hook, target, type, args)
        unsetCurrentInstance()
        resetTracking()
        return res
      })
    if (prepend) {
      hooks.unshift(wrappedHook)
    } else {
      hooks.push(wrappedHook)
    }
    return wrappedHook
  }
  // 省略一些不重要的代码
}

injectHook的代码看上去多，实际上做的事情非常清晰：

首先拿到target（也就是组件实例）的对应类型的钩子函数的数组，比如目前注入的是onMounted钩子，对应类型m，那么我们先拿到hooks = target['m']，对应目前已经注册的onMounted钩子
然后把hook（也就是我们传给钩子函数的回调）和错误处理的内容包裹到了一起，从而得到wrappedHook，再把wrappedHook放到hooks当中

至此，我们就回答了“钩子函数是如何注入到组件实例当中的”这个问题：实际上就是把钩子函数的回调分类放到了实例的hooks数组中，从而可以在组件的生命周期对回调进行触发。

触发

按生命周期来分，不同的钩子函数回调的触发时机不同，例如：

onBeforeMount、onMounted：触发时机在mountComponent阶段，具体代码位于renderer.ts的setupRenderEffect函数中
onBeforeUpdate、onUpdated：触发时机在updateComponent阶段，代码同样位于setupRenderEffect函数中
onBeforeUnmount、onUnmounted：触发时机在unmountComponent阶段，代码位于unmountComponent函数中

按触发方式来分，可以分为同步和异步两类：

同步：onBeforeMount、onBeforeUpdate、onBeforeUnmount
异步：onMounted、onUpdated、onUnmounted

由于钩子函数回调的触发具有相似性，以下仅介绍onBeforeMount和onMounted，其他钩子函数的原理是一样的。

// 仅保留了钩子函数相关代码
const componentUpdateFn = () => {
  if (!instance.isMounted) {
    const { bm, m, parent } = instance
    // beforeMount hook
    if (bm) {
      invokeArrayFns(bm)
    }
    // mounted hook
    if (m) {
      queuePostRenderEffect(m, parentSuspense)
    }
  } else {
    // updateComponent
    let { next, bu, u, parent, vnode } = instance

    // beforeUpdate hook
    if (bu) {
      invokeArrayFns(bu)
    }
    // updated hook
    if (u) {
      queuePostRenderEffect(u, parentSuspense)
    }
  }
}

从代码可以看到，当实例还没有被挂载的情况下，组件实例上的bm和m会被解构出来，这两个变量就是onBeforeMounted和onMounted的钩子函数回调数组。

对于bm，invokeArrayFns函数以同步的形式对bm中的回调进行调用

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}

对于m，queuePostRenderEffect函数以异步的形式对m中的回调进行调用。如果想要了解queuePostRenderEffect的具体内容，建议去整体性地看一下scheduler.ts的源码，了解vue3的调度机制，我之前的文章也有介绍过该部分的原理和源码。简单总结的话就是：

vue中的异步任务在执行时存在顺序关系，从先到后分别是pre > DOM更新 > post > nextTick
通过调用queuePostRenderEffect，m会被添加到post这个时机的任务队列当中，从而异步地在post时机被执行

那么，为什么要如此复杂呢？直接同步调用m中的回调不可以吗，为什么要用异步的方式在post时机调用？

之所以这样做，是因为watch和计算属性的更新时机位于pre阶段，如果同步调用m的回调，就会导致在onMounted回调中无法访问到最新的值。并且onMounted本身也意味着DOM挂载后这个时点，因此理应在位于DOM更新时点之后的post节点，onUpdated和onUnmounted也是同理。

至此，我们回答了问题“在组件实例的生命周期当中，钩子函数是如何触发的”：实际上就是在组件实例生命周期的特定阶段，把实例上的钩子函数回调数组拿到，并且以同步/异步的方式进行调用。