vue3 源码解析（6）— lifecycle 生命周期的实现

前言

对于 vue3 的生命周期，我们经常性会去疑问，生命周期有哪些呢，它是怎么去实现的， 又是什么时候调用的。

vue3 生命周期有哪些

下面这个表格列出了所有选项式api生命周期钩子和组合式api生命周期钩子，以及他们的对应关系和执行的时机。

composition api	options api	执行时机
—	beforeCreate	初始化组件内的属性（如：data，props，watch，computed等）之前
—	created	初始化组件内的属性（如：data，props，watch，computed等）之后
onBeforeMount	beforeMount	组件开始挂载之前
onMounted	mounted	组件挂载之后
onBeforeUpdate	beforeUpdate	组件数据更新之后，页面更新之前
onUpdated	updated	组件数据更新之后，页面更新之后
onBeforeUnmount	beforeUnmount	组件即将卸载，但还未卸载
onUnmounted	unmounted	组件卸载之后
onErrorCaptured	errorCaptured	捕获了后代组件传递的错误时
onRenderTracked	renderTracked	响应式依赖被组件的渲染作用追踪后，仅开发模式下使用
onRenderTriggered	renderTriggered	响应式依赖被组件触发了重新渲染之后，仅开发模式下使用
onActivated	activated	组件被keep-alive包裹，页面从不活动状态变为活动状态执时
onDeactivated	deactivated	组件被keep-alive包裹，页面从活动状态变为不活动状态执时
onServerPrefetch	serverPrefetch	组件实例在服务器上被渲染之前，为异步函数，仅ssr模式使用

生命周期是如何挂载到实例化的

首先，我们可以根据 onBeforeMount、onMounted 的源码定义，可以看出定义钩子函数时是直接调用 injectHook 挂载在实例化上。

import {
   
    currentInstance, setCurrentInstance } from './component'

const enum LifecycleHooks {
   
   
  BEFORE_MOUNT = 'bm',
  MOUNTED = 'm',
  BEFORE_UPDATE = 'bu',
  UPDATED = 'u',
  BEFORE_UNMOUNT = 'bum',
  UNMOUNTED = 'um',
}

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 =