从源码分析vue3组件的生命周期

概览

借官网一张图充篇幅☺

这张图展示了一个vue组件从开始渲染到卸载结束一整个生命周期经历的每个环节
但只罗列了选项式api生命周期钩子&＃xff0c;没有将组合式api的生命周期钩子放进去
下面这个表格列出了所有选项式api生命周期钩子和组合式api生命周期钩子&＃xff0c;以及他们的对应关系和执行的时机

源码分析

由于源码过多&＃xff0c;贴源码的时候会省略无关代码
代码里面的英文注释为源码注释&＃xff0c;中文注释为笔者所写
准备好开始撸源码了吗&＃x1f60f;

我们先看一下vue3是如何处注册生命周期钩子函数的
vue3直接通过类型声明了所有组合式生命周期api&＃xff0c;当我们调用这些函数的时候vue会通过类型创建相应的生命周期钩子函数&＃xff0c;这个很重要&＃xff0c;不但我们实际开发式会这么做&＃xff0c;vue也会通过这种方式去处理我们在组件内部定义的生命周期相关的选项式函数&＃xff0c;在分析后面源码时会提到。

const onBeforeMount &＃61; createHook("bm" /* LifecycleHooks.BEFORE_MOUNT */);
const onMounted &＃61; createHook("m" /* LifecycleHooks.MOUNTED */);
const onBeforeUpdate &＃61; createHook("bu" /* LifecycleHooks.BEFORE_UPDATE */);
const onUpdated &＃61; createHook("u" /* LifecycleHooks.UPDATED */);
const onBeforeUnmount &＃61; createHook("bum" /* LifecycleHooks.BEFORE_UNMOUNT */);
const onUnmounted &＃61; createHook("um" /* LifecycleHooks.UNMOUNTED */);
const onServerPrefetch &＃61; createHook("sp" /* LifecycleHooks.SERVER_PREFETCH */);
const onRenderTriggered &＃61; createHook("rtg" /* LifecycleHooks.RENDER_TRIGGERED */);
const onRenderTracked &＃61; createHook("rtc" /* LifecycleHooks.RENDER_TRACKED */);


下面我们就从挂载组件开始撸源码
mountComponent是挂载组件的入口&＃xff0c;里面包含了两个分支函数setupComponent和setupRenderEffect
看这两个函数名字我们大概知道他们是干嘛的

• setupComponent&＃xff1a;安装组件&＃xff0c;主要来初始化定义组件时我们在组件内部定义的所有属性
• setupRenderEffect&＃xff1a;安装渲染特效&＃xff0c;那肯定是将定义组件时的模板渲染为我们可以看到的页面内容了

const mountComponent &＃61; (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) &＃61;> {
const instance &＃61; (initialVNode.component &＃61; createComponentInstance(initialVNode, parentComponent, parentSuspense));
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// resolve props and slots for setup context
{
{
startMeasure(instance, &＃96;init&＃96;);
}
setupComponent(instance);
{
endMeasure(instance, &＃96;init&＃96;);
}
}
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
}


先进setupComponent&＃xff0c;重点看一下setupStatefulComponent这个函数

function setupComponent(instance, isSSR &＃61; false) {
isInSSRComponentSetup &＃61; isSSR;
const { props, children } &＃61; instance.vnode;
const isStateful &＃61; isStatefulComponent(instance);
initProps(instance, props, isStateful, isSSR);
initSlots(instance, children);
const setupResult &＃61; isStateful
? setupStatefulComponent(instance, isSSR)
: undefined;
isInSSRComponentSetup &＃61; false;
return setupResult;
}


setupStatefulComponent这个函数主要什么工作呢&＃xff1f;

• 首先执行了我们定义组件时的setup函数&＃xff0c;当然也包括在setup里面编写的所有生命周期相关的组合式api代码
• 然后处理setup返回的结果

function setupStatefulComponent(instance, isSSR) {
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 2. call setup() 执行setup函数
const { setup } &＃61; Component;
if (setup) {
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 调用setup并获得返回的结果
const setupResult &＃61; callWithErrorHandling(setup, instance, 0 /* ErrorCodes.SETUP_FUNCTION */, [reactivity.shallowReadonly(instance.props) , setupContext]);
reactivity.resetTracking();
unsetCurrentInstance();
if (shared.isPromise(setupResult)) {
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
}
else {
handleSetupResult(instance, setupResult, isSSR);
}
}
else {
finishComponentSetup(instance, isSSR);
}
}


这里不多说&＃xff0c;直接看finishComponentSetup

function handleSetupResult(instance, setupResult, isSSR) {
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
finishComponentSetup(instance, isSSR);
}


再进到applyOptions

function finishComponentSetup(instance, isSSR, skipOptions) {
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
//处理选项式api
applyOptions(instance);
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
}


重点来了&＃xff0c;睁大你的眼睛
applyOptions这个函数的主要工作&＃xff1a;

• 执行beforeCreate钩子函数
• 初始化初始化组件属性
• 执行created钩子函数
• 将选项式生命周期钩子函数注册为组合式生命周期钩子函数
  例如我们在组件内部定义了mounted函数&＃xff0c;这个函数实际上会调用组合式api onMounted将mounted函数注册为选项式钩子函数

function applyOptions(instance) {
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 在开始初始化组件属性之前调用了beforeCreate钩子函数
// call beforeCreate first before accessing other options since
// the hook may mutate resolved options (#2791)
if (options.beforeCreate) {
callHook(options.beforeCreate, instance, "bc" /* LifecycleHooks.BEFORE_CREATE */);
}
// 解构获取到组件实实例中的属性
const {
// state 状态属性
data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions,
// lifecycle 生命周期钩子
created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, render, renderTracked, renderTriggered, errorCaptured, serverPrefetch,
// public API 公开api
expose, inheritAttrs,
// assets 资源属性
components, directives, filters } &＃61; options;

//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 这里源码注释说明了选项是属性的初始化顺序&＃xff0c;建议拿起小笔记记一下
// options initialization order (to be consistent with Vue 2):
// - props (already done outside of this function)
// - inject
// - methods
// - data (deferred since it relies on &＃96;this&＃96; access)
// - computed
// - watch (deferred since it relies on &＃96;this&＃96; access)
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码 此处省略的代码为初始化组件属性的代码
//&＃xff5e;&＃xff5e;&＃xff5e;
//初始化完组件属性之后&＃xff0c;调用的生命周期的created钩子函数
if (created) {
callHook(created, instance, "c" /* LifecycleHooks.CREATED */);
}
// 此处定义了一个将选项式生命周期钩子函数注册为组合式生命周期钩子函数的函数
function registerLifecycleHook(register, hook) {
if (shared.isArray(hook)) {
hook.forEach(_hook &＃61;> 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);
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
}


ok&＃xff0c;初始化完组件属性&＃xff0c;下面就是渲染页面

setupRenderEffect这个函数主要是渲染页面内容

const setupRenderEffect &＃61; (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) &＃61;> {
// 里面定义了一个更新组件的函数
const componentUpdateFn &＃61; () &＃61;> {
// 判断组件是否以及渲染过
if (!instance.isMounted) {
// 组件第一次渲染
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 调用beforeMount生命周期钩子函数
// onVnodeBeforeMount
if (!isAsyncWrapperVNode &&
(vnodeHook &＃61; props && props.onVnodeBeforeMount)) {
invokeVNodeHook(vnodeHook, parent, initialVNode);
}
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码 此处省略的代码为的页面渲染过程
//&＃xff5e;&＃xff5e;&＃xff5e;
// 此处执行mounted生命周期钩子函数
// mounted hook
if (m) {
queuePostRenderEffect(m, parentSuspense);
}
// 此处执行虚拟节点的mounted生命周期钩子函数
// onVnodeMounted
if (!isAsyncWrapperVNode &&
(vnodeHook &＃61; props && props.onVnodeMounted)) {
const scopedInitialVNode &＃61; initialVNode;
queuePostRenderEffect(() &＃61;> invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense);
}
// 如果组件被keep-alive包裹&＃xff0c;会执行activated生命周期钩子函数
// activated hook for keep-alive roots.
// #1742 activated hook must be accessed after first render
// since the hook may be injected by a child keep-alive
if (initialVNode.shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */ ||
(parent &&
isAsyncWrapper(parent.vnode) &&
parent.vnode.shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */)) {
instance.a && queuePostRenderEffect(instance.a, parentSuspense);
}
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码 此处省略的代码为的页面渲染过程
//&＃xff5e;&＃xff5e;&＃xff5e;
}
else {
// 组件已经渲染&＃xff0c;当响应式数据变化时会执行这里代码
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 此处执行beforeUpdate生命周期钩子函数
// beforeUpdate hook
if (bu) {
shared.invokeArrayFns(bu);
}
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
// 此处执行updated生命周期钩子函数
// updated hook
if (u) {
queuePostRenderEffect(u, parentSuspense);
}
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码
//&＃xff5e;&＃xff5e;&＃xff5e;
}
};
//&＃xff5e;&＃xff5e;&＃xff5e;
//此处省略n行代码 此处省略的代码为如何触发componentUpdateFn函数的代码&＃xff0c;不做详细说明
//&＃xff5e;&＃xff5e;&＃xff5e;
};


到此&＃xff0c;组件从开始挂载到挂载成功期间跟生命周期钩子相关的代码已基本分析完毕。
下面我们对其中的部分要点做个总结&＃xff1a;

• 开发过程中通过组合式生命周期api注册的钩子函数要比通过选项式api定义的钩子函数执行的早
  也就是说如果通过onMounted注册一个钩子函数&＃xff0c;它会直接在组件里定义mounted函数执行的早
• vue的状态选项初始化顺序&＃xff08;有先到后&＃xff09;为props inject methods data computed watch
• activated在组件第一次渲染不会执行&＃xff0c;只有组件变为不活动状态然后再变为活动状态时才会执行

如果大家还有什么疑问&＃xff0c;可以在评论区留言&＃xff0c;相互学习&＃xff01;