• Vue3 学习笔记 —— 生命周期

    目录

    Vue3 生命周期是什么

    Vue3 生命周期源码

    createHook 函数

    源码位置

    函数作用

    枚举 LifecycleHooks

    从组件实例上获取生命周期

    injectHook 函数

    源码位置

    函数作用

    componentUpdateFn 函数

    源码位置

    函数作用

    unmount 函数

    源码位置

    函数作用

    Vue3 生命周期是什么

    一个组件 从创建到销毁的过程 称为生命周期

    Vue3 组合式API（setup语法糖） 是没有 beforeCreate 和 created 这两个生命周期的

    生命周期（选项式 API）执行时间
    beforeCreatesetup语法糖中，没有此生命周期。
    createdsetup语法糖中，没有此生命周期。
    onBeforeMount在组件 DOM 实际渲染挂载之前调用。在这一步中，根元素还不存在。
    onMounted在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问
    onBeforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。
    onUpdatedDOM更新后，updated 的方法立即会调用。
    onBeforeUnmount在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
    onUnmounted卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
    onErrorCaptured调试时使用。
    onRenderTracked调试时使用。
    onRenderTriggered调试时使用。
    onActivated
    onDeactivated

    Vue3 生命周期源码

    GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.https://github.com/vuejs/core.git

    createHook 函数

    源码位置

    core-main\packages\runtime-core\src\apiLifecycle.ts

    函数作用

    createHook 函数内部，通过函数柯里化，接受不同的生命周期枚举，并调用 injectHook 方法

    1. export const createHook =
    2.   extends Function = () => any>(lifecycle: LifecycleHooks) =>
    3.   (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
    4.     // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
    5.     (!isInSSRComponentSetup || lifecycle === LifecycleHooks.SERVER_PREFETCH) &&
    6.     injectHook(lifecycle, hook, target)

    枚举 LifecycleHooks

    这些枚举其实是 生命周期钩子函数的 简称

    1. export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
    2. export const onMounted = createHook(LifecycleHooks.MOUNTED)
    3. export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
    4. export const onUpdated = createHook(LifecycleHooks.UPDATED)
    5. export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
    6. export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)
    7. export const onServerPrefetch = createHook(LifecycleHooks.SERVER_PREFETCH)
    1. export const enum LifecycleHooks {
    2.   BEFORE_CREATE = 'bc',
    3.   CREATED = 'c',
    4.   BEFORE_MOUNT = 'bm',
    5.   MOUNTED = 'm',
    6.   BEFORE_UPDATE = 'bu',
    7.   UPDATED = 'u',
    8.   BEFORE_UNMOUNT = 'bum',
    9.   UNMOUNTED = 'um',
    10.   DEACTIVATED = 'da',
    11.   ACTIVATED = 'a',
    12.   RENDER_TRIGGERED = 'rtg',
    13.   RENDER_TRACKED = 'rtc',
    14.   ERROR_CAPTURED = 'ec',
    15.   SERVER_PREFETCH = 'sp'
    16. }

     

    从组件实例上获取生命周期

    生命周期钩子函数 会被挂载到 当前组件的实例 上

    通过 getCurrentInstance 获取当前组件实例，读取 生命周期钩子函数（的简称）

    1. const instance = getCurrentInstance();
    2. console.log(instance);

     

    injectHook 函数

    源码位置

    core-main\packages\runtime-core\src\apiLifecycle.ts

    函数作用

    createHook 函数内部，调用了 injectHook 方法，此方法用于 注册生命周期钩子

    1. export function injectHook(
    2.   type: LifecycleHooks,
    3.   hook: Function & { __weh?: Function },
    4.   target: ComponentInternalInstance | null = currentInstance,
    5.   prepend: boolean = false
    6. ): Function | undefined {
    7.   if (target) {
    8.     // 创建 hook 做一个缓存
    9.     // 如果有 hook 函数直接返回，否则创建一个新数组（也就是说她永远是一个 Function 类型的数组）
    10.     const hooks = target[type] || (target[type] = [])
    11.     // cache the error handling wrapper for injected hooks so the same hook
    12.     // can be properly deduped by the scheduler. "__weh" stands for "with error
    13.     // handling".
    14.     const wrappedHook =
    15.       hook.__weh ||
    16.       (hook.__weh = (...args: unknown[]) => {
    17.         // 如果组件已经卸载，则直接 return
    18.         if (target.isUnmounted) {
    19.           return
    20.         }
    21.         // disable tracking inside all lifecycle hooks
    22.         // since they can potentially be called inside effects.
    23.         // 否则就会停止依赖收集，避免重复收集依赖（因为组件初始化的时候，已经收集过依赖了）
    24.         pauseTracking()
    25.         // Set currentInstance during hook invocation.
    26.         // This assumes the hook does not synchronously trigger other hooks, which
    27.         // can only be false when the user does something really funky.
    28.         // 设置当前 target 为组件实例
    29.         setCurrentInstance(target)
    30.         // 执行钩子函数
    31.         const res = callWithAsyncErrorHandling(hook, target, type, args)
    32.         // 清空当前组件实例（释放 target）
    33.         unsetCurrentInstance()
    34.         // 恢复依赖收集
    35.         resetTracking()
    36.         return res
    37.       })
    38.     if (prepend) {
    39.       hooks.unshift(wrappedHook)
    40.     } else {
    41.       // 添加 hook
    42.       hooks.push(wrappedHook)
    43.     }
    44.     return wrappedHook
    45.   } else if (__DEV__) {
    46.     const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''))
    47.     warn(
    48.       `${apiName} is called when there is no active component instance to be ` +
    49.         `associated with. ` +
    50.         `Lifecycle injection APIs can only be used during execution of setup().` +
    51.         (__FEATURE_SUSPENSE__
    52.           ? ` If you are using async setup(), make sure to register lifecycle ` +
    53.             `hooks before the first await statement.`
    54.           : ``)
    55.     )
    56.   }
    57. }

    componentUpdateFn 函数

    源码位置

    core-main\packages\runtime-core\src\renderer.ts

    函数作用

    此函数展示了 onMounted onUpdated 的实现过程

    1.   const setupRenderEffect: SetupRenderEffectFn = (
    2.     instance,
    3.     initialVNode,
    4.     container,
    5.     anchor,
    6.     parentSuspense,
    7.     isSVG,
    8.     optimized
    9.   ) => {
    10.     const componentUpdateFn = () => {
    11.       // 如果当前组件没挂载，就走这个判断
    12.       if (!instance.isMounted) {
    13.         let vnodeHook: VNodeHook | null | undefined
    14.         const { el, props } = initialVNode
    15.         const { bm, m, parent } = instance
    16.         const isAsyncWrapperVNode = isAsyncWrapper(initialVNode)
    17.  
    18.         toggleRecurse(instance, false)
    19.         // beforeMount hook 判断下有没有 beforeMounted 生命周期函数，有的话就执行
    20.         if (bm) {
    21.           invokeArrayFns(bm)
    22.         }
    23.         // onVnodeBeforeMount
    24.         if (
    25.           !isAsyncWrapperVNode &&
    26.           (vnodeHook = props && props.onVnodeBeforeMount)
    27.         ) {
    28.           invokeVNodeHook(vnodeHook, parent, initialVNode)
    29.         }
    30.         if (
    31.           __COMPAT__ &&
    32.           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
    33.         ) {
    34.           instance.emit('hook:beforeMount')
    35.         }
    36.         toggleRecurse(instance, true)
    37.  
    38.         // 进行渲染操作
    39.         if (el && hydrateNode) {
    40.           // vnode has adopted host node - perform hydration instead of mount.
    41.           const hydrateSubTree = () => {
    42.             if (__DEV__) {
    43.               startMeasure(instance, `render`)
    44.             }
    45.             instance.subTree = renderComponentRoot(instance)
    46.             if (__DEV__) {
    47.               endMeasure(instance, `render`)
    48.             }
    49.             if (__DEV__) {
    50.               startMeasure(instance, `hydrate`)
    51.             }
    52.             hydrateNode!(
    53.               el as Node,
    54.               instance.subTree,
    55.               instance,
    56.               parentSuspense,
    57.               null
    58.             )
    59.             if (__DEV__) {
    60.               endMeasure(instance, `hydrate`)
    61.             }
    62.           }
    63.  
    64.           if (isAsyncWrapperVNode) {
    65.             ;(initialVNode.type as ComponentOptions).__asyncLoader!().then(
    66.               // note: we are moving the render call into an async callback,
    67.               // which means it won't track dependencies - but it's ok because
    68.               // a server-rendered async wrapper is already in resolved state
    69.               // and it will never need to change.
    70.               () => !instance.isUnmounted && hydrateSubTree()
    71.             )
    72.           } else {
    73.             hydrateSubTree()
    74.           }
    75.         } else {
    76.           if (__DEV__) {
    77.             startMeasure(instance, `render`)
    78.           }
    79.           const subTree = (instance.subTree = renderComponentRoot(instance))
    80.           if (__DEV__) {
    81.             endMeasure(instance, `render`)
    82.           }
    83.           if (__DEV__) {
    84.             startMeasure(instance, `patch`)
    85.           }
    86.           // 把 VNode 挂载到容器中（此时已经挂载完 DOM 元素了）
    87.           patch(
    88.             null,
    89.             subTree,
    90.             container,
    91.             anchor,
    92.             instance,
    93.             parentSuspense,
    94.             isSVG
    95.           )
    96.           if (__DEV__) {
    97.             endMeasure(instance, `patch`)
    98.           }
    99.           // 此时已经可以读到 dom 了
    100.           initialVNode.el = subTree.el
    101.         }
    102.         // mounted hook 判断下有没有 onMounted 生命周期函数
    103.         if (m) {
    104.           // queuePostRenderEffect 函数用于执行生命周期钩子
    105.           queuePostRenderEffect(m, parentSuspense)
    106.         }
    107.         // onVnodeMounted
    108.         if (
    109.           !isAsyncWrapperVNode &&
    110.           (vnodeHook = props && props.onVnodeMounted)
    111.         ) {
    112.           const scopedInitialVNode = initialVNode
    113.           queuePostRenderEffect(
    114.             () => invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode),
    115.             parentSuspense
    116.           )
    117.         }
    118.         if (
    119.           __COMPAT__ &&
    120.           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
    121.         ) {
    122.           queuePostRenderEffect(
    123.             () => instance.emit('hook:mounted'),
    124.             parentSuspense
    125.           )
    126.         }
    127.  
    128.         // activated hook for keep-alive roots.
    129.         // #1742 activated hook must be accessed after first render
    130.         // since the hook may be injected by a child keep-alive
    131.         if (
    132.           initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE ||
    133.           (parent &&
    134.             isAsyncWrapper(parent.vnode) &&
    135.             parent.vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE)
    136.         ) {
    137.           instance.a && queuePostRenderEffect(instance.a, parentSuspense)
    138.           if (
    139.             __COMPAT__ &&
    140.             isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
    141.           ) {
    142.             queuePostRenderEffect(
    143.               () => instance.emit('hook:activated'),
    144.               parentSuspense
    145.             )
    146.           }
    147.         }
    148.         instance.isMounted = true
    149.  
    150.         if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
    151.           devtoolsComponentAdded(instance)
    152.         }
    153.  
    154.         // #2458: deference mount-only object parameters to prevent memleaks
    155.         initialVNode = container = anchor = null as any
    156.       // 如果当前组件挂载了，走这个判断，进行组件更新
    157.       } else {
    158.         // updateComponent
    159.         // This is triggered by mutation of component's own state (next: null)
    160.         // OR parent calling processComponent (next: VNode)
    161.         let { next, bu, u, parent, vnode } = instance
    162.         let originNext = next
    163.         let vnodeHook: VNodeHook | null | undefined
    164.         if (__DEV__) {
    165.           pushWarningContext(next || instance.vnode)
    166.         }
    167.  
    168.         // Disallow component effect recursion during pre-lifecycle hooks.
    169.         toggleRecurse(instance, false)
    170.         if (next) {
    171.           next.el = vnode.el
    172.           updateComponentPreRender(instance, next, optimized)
    173.         } else {
    174.           next = vnode
    175.         }
    176.         // 组件更新之前执行，此时 DOM 还没有更新
    177.         // beforeUpdate hook
    178.         if (bu) {
    179.           invokeArrayFns(bu)
    180.         }
    181.         // onVnodeBeforeUpdate
    182.         if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
    183.           invokeVNodeHook(vnodeHook, parent, next, vnode)
    184.         }
    185.         if (
    186.           __COMPAT__ &&
    187.           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
    188.         ) {
    189.           instance.emit('hook:beforeUpdate')
    190.         }
    191.         toggleRecurse(instance, true)
    192.  
    193.         // render
    194.         if (__DEV__) {
    195.           startMeasure(instance, `render`)
    196.         }
    197.         const nextTree = renderComponentRoot(instance)
    198.         if (__DEV__) {
    199.           endMeasure(instance, `render`)
    200.         }
    201.         const prevTree = instance.subTree
    202.         instance.subTree = nextTree
    203.  
    204.         if (__DEV__) {
    205.           startMeasure(instance, `patch`)
    206.         }
    207.         patch(
    208.           prevTree,
    209.           nextTree,
    210.           // parent may have changed if it's in a teleport
    211.           hostParentNode(prevTree.el!)!,
    212.           // anchor may have changed if it's in a fragment
    213.           getNextHostNode(prevTree),
    214.           instance,
    215.           parentSuspense,
    216.           isSVG
    217.         )
    218.         // patch 完成之后，DOM 组件已经是最新的了
    219.         if (__DEV__) {
    220.           endMeasure(instance, `patch`)
    221.         }
    222.         next.el = nextTree.el
    223.         if (originNext === null) {
    224.           // self-triggered update. In case of HOC, update parent component
    225.           // vnode el. HOC is indicated by parent instance's subTree pointing
    226.           // to child component's vnode
    227.           updateHOCHostEl(instance, nextTree.el)
    228.         }
    229.         // updated hook
    230.         if (u) {
    231.           queuePostRenderEffect(u, parentSuspense)
    232.         }
    233.         // onVnodeUpdated
    234.         // 组件更新之后执行，此时 DOM 已经更新
    235.         if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
    236.           // queuePostRenderEffect 函数用于执行生命周期钩子
    237.           queuePostRenderEffect(
    238.             () => invokeVNodeHook(vnodeHook!, parent, next!, vnode),
    239.             parentSuspense
    240.           )
    241.         }
    242.         if (
    243.           __COMPAT__ &&
    244.           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
    245.         ) {
    246.           queuePostRenderEffect(
    247.             () => instance.emit('hook:updated'),
    248.             parentSuspense
    249.           )
    250.         }
    251.  
    252.         if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
    253.           devtoolsComponentUpdated(instance)
    254.         }
    255.  
    256.         if (__DEV__) {
    257.           popWarningContext()
    258.         }
    259.       }
    260.     }
    261.  
    262.     // create reactive effect for rendering
    263.     const effect = (instance.effect = new ReactiveEffect(
    264.       componentUpdateFn,
    265.       () => queueJob(update),
    266.       instance.scope // track it in component's effect scope
    267.     ))
    268.  
    269.     const update: SchedulerJob = (instance.update = () => effect.run())
    270.     update.id = instance.uid
    271.     // allowRecurse
    272.     // #1801, #2043 component render effects should allow recursive updates
    273.     toggleRecurse(instance, true)
    274.  
    275.     if (__DEV__) {
    276.       effect.onTrack = instance.rtc
    277.         ? e => invokeArrayFns(instance.rtc!, e)
    278.         : void 0
    279.       effect.onTrigger = instance.rtg
    280.         ? e => invokeArrayFns(instance.rtg!, e)
    281.         : void 0
    282.       update.ownerInstance = instance
    283.     }
    284.  
    285.     update()
    286.   }

    unmount 函数

    源码位置

    core-main\packages\runtime-core\src\renderer.ts

    函数作用

    此函数展示了 onUnmounted 的实现过程

    1.   const unmount: UnmountFn = (
    2.     vnode,
    3.     parentComponent,
    4.     parentSuspense,
    5.     doRemove = false,
    6.     optimized = false
    7.   ) => {
    8.     const {
    9.       type,
    10.       props,
    11.       ref,
    12.       children,
    13.       dynamicChildren,
    14.       shapeFlag,
    15.       patchFlag,
    16.       dirs
    17.     } = vnode
    18.     // unset ref
    19.     if (ref != null) {
    20.       setRef(ref, null, parentSuspense, vnode, true)
    21.     }
    22.  
    23.     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
    24.       ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
    25.       return
    26.     }
    27.  
    28.     const shouldInvokeDirs = shapeFlag & ShapeFlags.ELEMENT && dirs
    29.     const shouldInvokeVnodeHook = !isAsyncWrapper(vnode)
    30.  
    31.     let vnodeHook: VNodeHook | undefined | null
    32.     if (
    33.       shouldInvokeVnodeHook &&
    34.       (vnodeHook = props && props.onVnodeBeforeUnmount)
    35.     ) {
    36.       invokeVNodeHook(vnodeHook, parentComponent, vnode)
    37.     }
    38.  
    39.     if (shapeFlag & ShapeFlags.COMPONENT) {
    40.       // 清空当前组件 effect 收集的依赖 和 副作用函数
    41.       unmountComponent(vnode.component!, parentSuspense, doRemove)
    42.     } else {
    43.       if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
    44.         vnode.suspense!.unmount(parentSuspense, doRemove)
    45.         return
    46.       }
    47.       // 执行 beforeUnmount 卸载操作
    48.       if (shouldInvokeDirs) {
    49.         invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount')
    50.       }
    51.  
    52.       if (shapeFlag & ShapeFlags.TELEPORT) {
    53.         ;(vnode.type as typeof TeleportImpl).remove(
    54.           vnode,
    55.           parentComponent,
    56.           parentSuspense,
    57.           optimized,
    58.           internals,
    59.           doRemove
    60.         )
    61.       } else if (
    62.         dynamicChildren &&
    63.         // #1153: fast path should not be taken for non-stable (v-for) fragments
    64.         (type !== Fragment ||
    65.           (patchFlag > 0 && patchFlag & PatchFlags.STABLE_FRAGMENT))
    66.       ) {
    67.         // fast path for block nodes: only need to unmount dynamic children.
    68.         // 组件卸载完成后，清空当前组件下所有的子节点
    69.         unmountChildren(
    70.           dynamicChildren,
    71.           parentComponent,
    72.           parentSuspense,
    73.           false,
    74.           true
    75.         )
    76.       } else if (
    77.         (type === Fragment &&
    78.           patchFlag &
    79.             (PatchFlags.KEYED_FRAGMENT | PatchFlags.UNKEYED_FRAGMENT)) ||
    80.         (!optimized && shapeFlag & ShapeFlags.ARRAY_CHILDREN)
    81.       ) {
    82.         unmountChildren(children as VNode[], parentComponent, parentSuspense)
    83.       }
    84.  
    85.       if (doRemove) {
    86.         remove(vnode)
    87.       }
    88.     }
    89.     // 卸载完成后，通过 queuePostRenderEffect 执行 unmounted 生命周期钩子，表示卸载完成
    90.     if (
    91.       (shouldInvokeVnodeHook &&
    92.         (vnodeHook = props && props.onVnodeUnmounted)) ||
    93.       shouldInvokeDirs
    94.     ) {
    95.       queuePostRenderEffect(() => {
    96.         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)
    97.         shouldInvokeDirs &&
    98.           invokeDirectiveHook(vnode, null, parentComponent, 'unmounted')
    99.       }, parentSuspense)
    100.     }
    101.   }


     

  • 相关阅读:
    LeetCode-409. Longest Palindrome [C++][Java]
    JAVA毕业设计考研经网站系统计算机源码+lw文档+系统+调试部署+数据库
    Nginx Note（01）——Nginx简介、优点和用途
    【构建ML驱动的应用程序】第 8 章 ：部署模型时的注意事项
    JNI中javah命令的使用,生成.h的头文件
    react循环实现及key的作用
    【精简】Web API--DOM获取元素
    卷积神经网络的常用改进
    Element Plus el-form表单自定义插槽如何使用
    Spring
  • 原文地址：https://blog.csdn.net/Lyrelion/article/details/126900694