vue3生命周期源码浅析
概述
生命周期在Vue3中是一个很重要的概念，它允许我们在特定的时间点执行一些代码，比如在组件创建、更新和销毁时执行一些操作。
生命周期函数分为以下几种：
- 1.
onBeforeMount: 在组件挂载之前执行 - 2.
onMounted: 在组件挂载之后执行 - 3.
onBeforeUpdate: 在组件更新之前执行 - 4.
onUpdated: 在组件更新之后执行 - 5.
onBeforeUnmount: 在组件销毁之前执行 - 6.
onUnmounted: 在组件销毁之后执行 - 7.
onServerPrefetch: 在服务器端渲染时执行 - 8.
onRenderTracked: 在组件渲染时执行 - 9.
onRenderTriggered: 在组件渲染时执行 - 10.
onErrorCaptured: 在组件发生错误时执行
Vue3的生命周期运行示意图如下
源码分析
Vue3中的上述这些生命周期钩子函数的实现大同小异，主要都是基于hook函数实现，在不同的时机执行对应的·hook·，其主要实现位于packages\runtime-core\dist\runtime-core.cjs.js
const createHook =
(lifecycle) =>
(hook, target = currentInstance) => {
if (!isInSSRComponentSetup || lifecycle === "sp") {
injectHook(lifecycle, (...args) => hook(...args), target);
}
};
lifecycle为onBeforeMount等钩子函数名称,如下枚举：,hook就是钩子函数中的回调函数,target为当前组件实例
export enum LifecycleHooks {
BEFORE_CREATE = 'bc',
CREATED = 'c',
BEFORE_MOUNT = 'bm',
MOUNTED = 'm',
BEFORE_UPDATE = 'bu',
UPDATED = 'u',
BEFORE_UNMOUNT = 'bum',
UNMOUNTED = 'um',
DEACTIVATED = 'da',
ACTIVATED = 'a',
RENDER_TRIGGERED = 'rtg',
RENDER_TRACKED = 'rtc',
ERROR_CAPTURED = 'ec',
SERVER_PREFETCH = 'sp',
}
在调用injectHook时，会将同类型的hook挂载到组件实例中，hook会被包装一层，用于处理错误捕获和跟踪，其中也用了缓存的策略，具体实现如下：
function injectHook(type, hook, target = currentInstance, prepend = false) {
if (target) {
const hooks = target[type] || (target[type] = []);
const wrappedHook =
hook.__weh ||
(hook.__weh = (...args) => {
if (target.isUnmounted) {
return;
}
reactivity.pauseTracking(); // 暂停依赖追踪
const reset = setCurrentInstance(target);
const res = callWithAsyncErrorHandling(hook, target, type, args);
reset();
reactivity.resetTracking(); // 恢复依赖追踪
return res;
});
if (prepend) {
// 如果是前置钩子，则插入到数组的开头
hooks.unshift(wrappedHook);
} else {
hooks.push(wrappedHook);
}
return wrappedHook;
}
}
注册过程
上面阐述了hook的创建，接下来看下生命周期钩子函数的注册,函数注册后，才方便vue3在适当的时机调用。vue3自定义了一个registerLifecycleHook函数，用于注册生命周期钩子函数。如下所示：
function registerLifecycleHook(register, hook) {
if (isArray(hook)) {
hook.forEach((_hook) => register(_hook.bind(publicThis)));
} else if (hook) {
register(hook.bind(publicThis));
}
}
registerLifecycleHook(onBeforeMount, beforeMount);
registerLifecycleHook(onMounted, mounted);
registerLifecycleHook(onBeforeUpdate, beforeUpdate);
registerLifecycleHook(onUpdated, updated);
registerLifecycleHook(onActivated, activated);
registerLifecycleHook(onDeactivated, deactivated);
registerLifecycleHook(onErrorCaptured, errorCaptured);
registerLifecycleHook(onRenderTracked, renderTracked);
registerLifecycleHook(onRenderTriggered, renderTriggered);
registerLifecycleHook(onBeforeUnmount, beforeUnmount);
registerLifecycleHook(onUnmounted, unmounted);
registerLifecycleHook(onServerPrefetch, serverPrefetch); // ssr内容，后面不会讲
这段代码还将钩子函数与publicThis绑定，并将它们传递给registerLifecycleHook函数。publickThis是就是当前instance的proxy对象，用于存储当前实例的变量
instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
生命周期函数函数经历的阶段
vue3是在组件初始化时进行钩子函数的注册，主要经历了这些阶段：
render=>patch => processComponent => mountComponent => setupComponent => setupStatefulComponent => handleSetupResult=>finishComponentSetup => applyOptions=> registerLifecycleHook
各个阶段的作用如下：
render:Vue组件中定义的渲染函数，它返回一个虚拟 DOM 树描述；定义了组件的 UI 结构，它可以是模板语法或者render函数本身，用于生成组件的虚拟 DOM。patch：Vue内部的核心函数，负责将虚拟 DOM 渲染成真实 DOM，并处理 DOM 的更新和变更；实现了 Vue 的响应式更新机制，确保虚拟 DOM 的变更能够高效地同步到真实 DOM 上，实现数据驱动的视图更新。processComponent：处理组件的函数，可能包括组件的初始化、更新等过程。在组件的生命周期中，processComponent 负责管理组件的各个阶段，例如数据的准备、事件的绑定等，确保组件能够正常工作并响应数据变化。mountComponent：挂载组件到 DOM 上的过程，包括创建组件实例、初始化数据等。mountComponent是组件生命周期中的重要阶段，它负责将组件实例化并将其挂载到页面的 DOM 元素上，使得组件能够被用户访问和操作。setupComponent：设置组件的函数，可能包括组件的配置项、参数处理等。setupComponent阶段用于初始化组件的配置和参数，为后续的生命周期钩子、事件处理和数据绑定等操作做准备。setupStatefulComponent：设置有状态组件的函数，用于处理有状态组件的状态初始化和管理。对于有状态的组件（即有响应式数据的组件），setupStatefulComponent负责初始化组件的状态数据，并确保这些数据的响应式更新机制能够正常运作。handleSetupResult：处理设置结果的函数，可能包括对组件状态和属性的初始化。主要用于处理setup()函数的返回结果，确保组件的状态、计算属性等被正确地初始化和配置。finishComponentSetup：完成组件设置的函数，确保组件已经初始化并准备好渲染。在组件初始化阶段的最后，finishComponentSetup确保所有的组件设置和初始化工作已经完成，组件可以安全地开始渲染和更新。applyOptions：应用组件选项的函数，包括组件的配置项、生命周期钩子等。applyOptions用于将组件定义的选项（如 data、methods、computed 等）应用到组件实例上，以及注册和管理组件的生命周期钩子函数，确保组件在各个生命周期阶段能够执行相应的逻辑。
生命周期钩子函数的调用时机
onBeforeMount
在mountComponent阶段，会调用setupRenderEffect函数，这个函数顾名思义就是设置组件的effect，用于设置和管理组件的渲染效果，实现vue3组件的响应式更新机制，确保当组件的响应式数据发生变化时，能够自动重新渲染组件的视图
setupRenderEffect函数内部会new ReactiveEffect实例，并赋值给instance.effect，并调用componentUpdateFn函数执行。而在componentUpdateFn中会先判断组件是否已经被挂载，如果已经挂载，则处理更新逻辑，否则进行挂载逻辑。
当组件未被挂载时,instance.isMounted为false，Vue3会从instance中获取注册钩子函数bm,若它存在，在调用invokeArrayFns进行遍历调用。
onMounted
onMounted钩子函数同onBeforeMount一样，在组件未被挂载时，从instance中解构注册的钩子函数m，通过queuePostRenderEffect进入调度器schedule，在组件挂载完成时调用flushPostFlushCbs,其内部会根据每一个job的id进行排序,然后依次执行。
onBeforeUpdate
onBeforeUpdate钩子函数和onBeforeMount函数类似，不同的是onBeforeUpdate是在组件被挂载后即instance.isMounted为true时，在组件发生的响应式数据变化时，解构钩子函数bu，被调用
onUpdated
onUpdated钩子函数和onMounted函数类似，不同的是onUpdated是在组件被挂载后即instance.isMounted为true时，在组件发生的响应式数据变化时，解构钩子函数u，被调用
onBeforeUnmount
onBeforeUnmount在组件卸载前会调用,对应的注册的钩子函数变量名为bum,会在unmountComponent函数里调用。而unmountComponent函数会在函数unmount中判断shapeFlag,若其为组件类型则调用。通过invokeArrayFns进行遍历执行
onUnmounted
onUnmounted在组件卸载后调用,对应的注册的钩子函数变量名为um,组件在卸载时先调用onBeforeUnmount钩子，如果instance.update存在，则调用unmount方法，然后调用queuePostRenderEffect将um加入到调度器中，在组件卸载完成后调用flushPostFlushCbs，执行um钩子函数。