devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3 源码阅读（10）：组件化 —— 实现原理_vue3组件化开发

作者：我家小花儿 | 2024-06-24 06:40:08

赞

踩

vue3组件化开发

 我的开源库：

组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。

1，Vue 中组件的定义方式

在讲解组件化的实现原理前，首先说明在 Vue 中，一个组件的本质到底是什么。Vue 中有两种形式的组件，分别是有状态组件和无状态组件，有状态组件的本质是一个对象字面量，无状态组件的本质是一个函数。也就是说，在 Vue 中，组件的本质是一个对象字面量或者一个函数，这里以有状态组件进行讲解。

2，VNode 简介

VNode 的本质就是一个普通的对象字面量，只不过这个对象字面量能够很好的描述真实 DOM，通过 VNode 可以渲染出页面中真实的 DOM。

VNode 是通过组件的 render 函数创建出来的，我们平时在开发中，一般都是使用 template 字符串描述页面内容，这个模板字符串会被 Vue 的编译器编译成 render 函数，所以在 Vue 的运行时，用于描述组件渲染内容的是 render 函数。

下面展示一下 Vue3 中 VNode 的 TypeScript 的类型定义：

  1. export interface VNode<
  2.   HostNode = RendererNode,
  3.   HostElement = RendererElement,
  4.   ExtraProps = { [key: string]: any }
  5. > {
  6.   __v_isVNode: true
  7.   [ReactiveFlags.SKIP]: true
  8.   type: VNodeTypes
  9.   props: (VNodeProps & ExtraProps) | null
  10.   key: string | number | symbol | null
  11.   ref: VNodeNormalizedRef | null
  12.   scopeId: string | null
  13.   slotScopeIds: string[] | null
  14.   children: VNodeNormalizedChildren
  15.   component: ComponentInternalInstance | null
  16.   dirs: DirectiveBinding[] | null
  17.   transition: TransitionHooks<HostElement> | null
  18.   el: HostNode | null
  19.   anchor: HostNode | null // fragment anchor
  20.   target: HostElement | null // teleport target
  21.   targetAnchor: HostNode | null // teleport target anchor
  22.   staticCount: number
  23.   suspense: SuspenseBoundary | null
  24.   ssContent: VNode | null
  25.   ssFallback: VNode | null
  26.   shapeFlag: number
  27.   patchFlag: number
  28.   dynamicProps: string[] | null
  29.   dynamicChildren: VNode[] | null
  30.   appContext: AppContext | null
  31.   memo?: any[]
  32.   isCompatRoot?: true
  33.   ce?: (instance: ComponentInternalInstance) => void
  34. }

VNode 对象的属性还是很多的，这里不用看这么多，先关注一下 type 属性。

  1. export interface VNode<
  2.   HostNode = RendererNode,
  3.   HostElement = RendererElement,
  4.   ExtraProps = { [key: string]: any }
  5. > {
  6.   type: VNodeTypes
  7. }
  8.  
  9. export type VNodeTypes =
  10.   | string
  11.   | VNode
  12.   | Component
  13.   | typeof Text
  14.   | typeof Static
  15.   | typeof Comment
  16.   | typeof Fragment
  17.   | typeof TeleportImpl
  18.   | typeof SuspenseImpl

type 属性用于描述 VNode 的类型，VNode 的类型有很多种，这里我们看下 string 和 Component 类型，当 VNode 的 type 属性是字符串的时候，说明当前的 VNode 描述的是普通的元素，当 VNode 的 type 是 Component 的时候，说明当前的 VNode 描述的是一个组件。

假设我们的 Vue 中有一个 MyComponent 组件，我们在一个模板字符串中使用了这个组件，代码如下所示：

  1. <template>
  2.   <MyComponent></MyComponent>
  3. </template>

上面的模板字符串会被编译成一个 render 函数，render 函数执行返回一个 VNode，这个 VNode 是一个组件类型的 VNode，表明需要渲染一个组件。

  1. componentVNode = {
  2.   type: {
  3.     ...组件的定义对象...
  4.   },
  5.   ......
  6. }

有了组件类型的 VNode，接下来看看这个组件 VNode 是如何渲染和更新的。

3，组件的挂载和更新

组件挂载和更新的逻辑都写在渲染器中，我们直接看源码。

  1. const patch: PatchFn = (
  2.   n1,
  3.   n2,
  4.   container,
  5.   anchor = null,
  6.   parentComponent = null,
  7.   parentSuspense = null,
  8.   isSVG = false,
  9.   slotScopeIds = null,
  10.   optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
  11. ) => {
  12.   // 解构获取 n2 的 type、ref、shapeFlag
  13.   const { type, ref, shapeFlag } = n2
  14.   // 根据 n2 Vnode 的类型进行不同的处理
  15.   switch (type) {
  16.     ......
  17.     default:
  18.       if (shapeFlag & ShapeFlags.ELEMENT) {
  19.         // 处理元素节点
  20.         processElement()
  21.       } else if (shapeFlag & ShapeFlags.COMPONENT) {
  22.         // 处理组件节点
  23.         processComponent(
  24.           n1,
  25.           n2,
  26.           container,
  27.           anchor,
  28.           parentComponent,
  29.           parentSuspense,
  30.           isSVG,
  31.           slotScopeIds,
  32.           optimized
  33.         )
  34.       } else if (__DEV__) {
  35.         // 如果以上条件都不满足，并且是在开发模式下的话，则打印出相关警告：违法的 vnode 类型
  36.         warn('Invalid VNode type:', type, `(${typeof type})`)
  37.       }
  38.   }
  39. }

在 patch 函数中，会根据 VNode 类型的不同使用不同的函数进行处理，如果当前的 VNode 表示的是组件的话，则会使用 processComponent 函数进行处理，processComponent 函数的内容如下所示：

  1. const processComponent = (
  2.   n1: VNode | null,
  3.   n2: VNode,
  4.   container: RendererElement,
  5.   anchor: RendererNode | null,
  6.   parentComponent: ComponentInternalInstance | null,
  7.   parentSuspense: SuspenseBoundary | null,
  8.   isSVG: boolean,
  9.   slotScopeIds: string[] | null,
  10.   optimized: boolean
  11. ) => {
  12.   if (n1 == null) {
  13.     mountComponent(
  14.       n2,
  15.       container,
  16.       anchor,
  17.       parentComponent,
  18.       parentSuspense,
  19.       isSVG,
  20.       optimized
  21.     )
  22.   } else {
  23.     updateComponent(n1, n2, optimized)
  24.   }
  25. }

在这里，判断 oldVNode 是否存在，如果存在的话，则执行 updateComponent 函数进行组件的更新，如果不存在的话，则执行 mountComponent 函数进行组件的挂载，我们首先看组件的挂载。

3-1，组件的挂载

  1. // 挂载组件节点
  2. const mountComponent: MountComponentFn = (
  3.   initialVNode,
  4.   container,
  5.   anchor,
  6.   parentComponent,
  7.   parentSuspense,
  8.   isSVG,
  9.   optimized
  10. ) => {
  11.   // 创建组件实例对象
  12.   const compatMountInstance =
  13.     __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
  14.   const instance: ComponentInternalInstance =
  15.     compatMountInstance ||
  16.     (initialVNode.component = createComponentInstance(
  17.       initialVNode,
  18.       parentComponent,
  19.       parentSuspense
  20.     ))
  21.  
  22.   // resolve props and slots for setup context
  23.   // 解析初始化一些数据
  24.   if (!(__COMPAT__ && compatMountInstance)) {
  25.     setupComponent(instance)
  26.   }
  27.   
  28.   setupRenderEffect(
  29.     instance,
  30.     initialVNode,
  31.     container,
  32.     anchor,
  33.     parentSuspense,
  34.     isSVG,
  35.     optimized
  36.   )
  37. }

在 mountComponent 函数中，首先创建组件的实例，每渲染一次组件，就会创建一个对应的实例，组件实例就是一个对象，这个对象维护着组件运行过程中的所有信息，例如：注册的生命周期函数、组件上次渲染的 VNode，组件状态等等。一个组件实例的内容如下所示：

  1. const instance: ComponentInternalInstance = {
  2.   uid: uid++,
  3.   vnode,
  4.   type,
  5.   parent,
  6.   appContext,
  7.   root: null!, // to be immediately set
  8.   next: null,
  9.   subTree: null!, // will be set synchronously right after creation
  10.   effect: null!,
  11.   update: null!, // will be set synchronously right after creation
  12.   scope: new EffectScope(true /* detached */),
  13.   render: null,
  14.   proxy: null,
  15.   exposed: null,
  16.   exposeProxy: null,
  17.   withProxy: null,
  18.   provides: parent ? parent.provides : Object.create(appContext.provides),
  19.   accessCache: null!,
  20.   renderCache: [],
  21.  
  22.   // local resolved assets
  23.   components: null,
  24.   directives: null,
  25.  
  26.   // resolved props and emits options
  27.   propsOptions: normalizePropsOptions(type, appContext),
  28.   emitsOptions: normalizeEmitsOptions(type, appContext),
  29.  
  30.   // emit
  31.   emit: null!, // to be set immediately
  32.   emitted: null,
  33.  
  34.   // props default value
  35.   propsDefaults: EMPTY_OBJ,
  36.  
  37.   // inheritAttrs
  38.   inheritAttrs: type.inheritAttrs,
  39.  
  40.   // state
  41.   ctx: EMPTY_OBJ,
  42.   data: EMPTY_OBJ,
  43.   props: EMPTY_OBJ,
  44.   attrs: EMPTY_OBJ,
  45.   slots: EMPTY_OBJ,
  46.   refs: EMPTY_OBJ,
  47.   setupState: EMPTY_OBJ,
  48.   setupContext: null,
  49.  
  50.   // suspense related
  51.   suspense,
  52.   suspenseId: suspense ? suspense.pendingId : 0,
  53.   asyncDep: null,
  54.   asyncResolved: false,
  55.  
  56.   // lifecycle hooks
  57.   // not using enums here because it results in computed properties
  58.   isMounted: false,
  59.   isUnmounted: false,
  60.   isDeactivated: false,
  61.   bc: null,
  62.   c: null,
  63.   bm: null,
  64.   m: null,
  65.   bu: null,
  66.   u: null,
  67.   um: null,
  68.   bum: null,
  69.   da: null,
  70.   a: null,
  71.   rtg: null,
  72.   rtc: null,
  73.   ec: null,
  74.   sp: null
  75. }

上面的对象包含着很多的状态信息，是实现组件化一个很重要的内容。

创建完组件实例后，Vue 使用 setupComponent 函数进行一些数据的解析和初始化，下面调用的 setupRenderEffect 函数是重点。

  1. const setupRenderEffect: SetupRenderEffectFn = (
  2.   instance,
  3.   initialVNode,
  4.   container,
  5.   anchor,
  6.   parentSuspense,
  7.   isSVG,
  8.   optimized
  9. ) => {
  10.   const componentUpdateFn = () => {
  11.     // 使用组件实例的 isMounted 属性判断组件是否挂载
  12.     // 如果为属性为 false，说明还未挂载，所以执行挂载逻辑
  13.     // 如果属性为 true 的话，说明已经挂载，所以执行更新逻辑
  14.     if (!instance.isMounted) {
  15.       const { bm, m } = instance
  16.       
  17.       // beforeMount hook
  18.       // 触发执行 beforeMount 生命周期函数
  19.       if (bm) {
  20.         invokeArrayFns(bm)
  21.       }
  22.       // 执行 render 函数，获取组件当前的 VNode
  23.       const subTree = (instance.subTree = renderComponentRoot(instance))
  24.       // 使用 patch 函数进行组件内容的渲染
  25.       patch(
  26.         null,
  27.         subTree,
  28.         container,
  29.         anchor,
  30.         instance,
  31.         parentSuspense,
  32.         isSVG
  33.       )
  34.  
  35.       // mounted hook
  36.       // 触发执行 mounted 生命周期函数
  37.       if (m) {
  38.         queuePostRenderEffect(m, parentSuspense)
  39.       }
  40.       // 将组件实例的 isMounted 属性设为 true，表明当前的组件已经完成了挂载操作
  41.       instance.isMounted = true
  42.     } else {
  43.       let { bu, u } = instance
  44.  
  45.       // beforeUpdate hook
  46.       // 触发执行 beforeUpdate 生命周期函数
  47.       if (bu) {
  48.         invokeArrayFns(bu)
  49.       }
  50.       // render
  51.       // 执行 render 函数，获取组件最新的 VNode
  52.       const nextTree = renderComponentRoot(instance)
  53.       // 获取组件上次渲染的 VNode
  54.       const prevTree = instance.subTree
  55.       instance.subTree = nextTree
  56.       // 使用 patch 函数进行组件的更新
  57.       patch(
  58.         prevTree,
  59.         nextTree,
  60.         // parent may have changed if it's in a teleport
  61.         hostParentNode(prevTree.el!)!,
  62.         // anchor may have changed if it's in a fragment
  63.         getNextHostNode(prevTree),
  64.         instance,
  65.         parentSuspense,
  66.         isSVG
  67.       )
  68.       // updated hook
  69.       // 触发执行 updated 生命周期函数
  70.       if (u) {
  71.         queuePostRenderEffect(u, parentSuspense)
  72.       }
  73.     }
  74.   }
  75.  
  76.   // 组件的更新借助了响应式系统中的 ReactiveEffect 类
  77.   const effect = (instance.effect = new ReactiveEffect(
  78.     componentUpdateFn,
  79.     () => queueJob(update),
  80.     instance.scope // track it in component's effect scope
  81.   ))
  82.  
  83.   const update: SchedulerJob = (instance.update = () => effect.run())
  84.  
  85.   update()
  86. }

上段代码中，借助 ReactiveEffect 类实现组件的更新，关于这个类的作用和源码可以看我的这篇博客，这里就不过多赘述了。

这里实现功能的重点在 componentUpdateFn 函数中，在上面代码的最后，执行了 update 函数，这会进而触发执行上面 componentUpdateFn 函数的执行，componentUpdateFn 函数的内部会执行组件的 render 函数，render 函数会读取组件的响应式数据，这会触发依赖收集。

componentUpdateFn 函数的解析看上面的注释即可。

3-2，组件的更新

当后续 render 函数依赖的响应式数据发生变化的时候，会再次触发执行 componentUpdateFn 函数进行组件的重新渲染，详细解释看上面源码的注释。

4，组件的 render 函数执行时，如何通过 this 访问到组件的响应式数据

结论：Vue 通过代理让 render 函数执行时能够通过 this 访问到组件实例中的响应式数据。

Vue 通过 renderComponentRoot 函数执行 render 函数，获取 VNode。

instance.subTree = renderComponentRoot(instance)
  1. export function renderComponentRoot(
  2.   instance: ComponentInternalInstance
  3. ): VNode {
  4.   const {
  5.     type: Component,
  6.     vnode,
  7.     proxy,
  8.     props,
  9.     propsOptions: [propsOptions],
  10.     slots,
  11.     attrs,
  12.     emit,
  13.     render,
  14.     renderCache,
  15.     data,
  16.     setupState,
  17.     ctx,
  18.     inheritAttrs
  19.   } = instance
  20.  
  21.   result = normalizeVNode(
  22.     render!.call(
  23.       proxy,
  24.       proxy!,
  25.       renderCache,
  26.       props,
  27.       setupState,
  28.       data,
  29.       ctx
  30.     )
  31.   )
  32.  
  33.   return result;
  34. }

render 函数执行的时候，函数中的 this 指向 instance.proxy，接下来看 instance.proxy 属性是如何创建出来的。

  1. export function setupComponent(instance) {
  2.   ......
  3.   setupStatefulComponent(instance);
  4. }
  5.  
  6. function setupStatefulComponent(instance) {
  7.   instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
  8. }
  9.  
  10. export const PublicInstanceProxyHandlers = {
  11.   get({ _: instance }: ComponentRenderContext, key: string) {
  12.     const { ctx, setupState, data, props, accessCache, type, appContext } =
  13.       instance
  14.  
  15.     if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
  16.       accessCache![key] = AccessTypes.SETUP
  17.       return setupState[key]
  18.     } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
  19.       accessCache![key] = AccessTypes.DATA
  20.       return data[key]
  21.     } else if (
  22.       (normalizedProps = instance.propsOptions[0]) &&
  23.       hasOwn(normalizedProps, key)
  24.     ) {
  25.       accessCache![key] = AccessTypes.PROPS
  26.       return props![key]
  27.     } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
  28.       accessCache![key] = AccessTypes.CONTEXT
  29.       return ctx[key]
  30.     }
  31.   }
  32. };

可以发现，在 render 函数中通过 this 读取某些属性的时候，代理会判断 instance 的 setupState、data、props 中有没有同名的属性，如果有的话，就进行数据的读取和返回，并且这些被读取属性已经是响应式的了。
 

5，setup 函数的实现

setup 的官方文档点击这里。

setup 函数只会在组件挂载的时候执行一次，setup 函数既可以返回一个对象，也可以返回一个函数，如果返回的是一个对象的话，这个对象中的数据可以像 data 和 props 一样使用，如果返回的是一个函数的话，这个函数会被当成组件的 render 函数。

源码如下所示：

  1. // 挂载组件节点
  2. const mountComponent: MountComponentFn = (
  3.   initialVNode,
  4.   container,
  5.   anchor,
  6.   parentComponent,
  7.   parentSuspense,
  8.   isSVG,
  9.   optimized
  10. ) => {
  11.   ......
  12.   // 解析初始化一些数据
  13.   if (!(__COMPAT__ && compatMountInstance)) {
  14.     setupComponent(instance)
  15.   }
  16.  
  17.   setupRenderEffect(
  18.     instance,
  19.     initialVNode,
  20.     container,
  21.     anchor,
  22.     parentSuspense,
  23.     isSVG,
  24.     optimized
  25.   )
  26. }
  27.  
  28. export function setupComponent(instance) {
  29.   ......
  30.   setupStatefulComponent(instance);
  31. }
  32.  
  33. function setupStatefulComponent(instance) {
  34.   const Component = instance.type as ComponentOptions
  35.   ......
  36.   const { setup } = Component
  37.   if (setup) {
  38.     setCurrentInstance(instance)
  39.     const setupResult = callWithErrorHandling(
  40.       setup,
  41.       instance,
  42.       ErrorCodes.SETUP_FUNCTION,
  43.       [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
  44.     )
  45.     unsetCurrentInstance()
  46.     handleSetupResult(instance, setupResult, isSSR)
  47.   }
  48. }
  49.  
  50. export function handleSetupResult(
  51.   instance: ComponentInternalInstance,
  52.   setupResult: unknown,
  53.   isSSR: boolean
  54. ) {
  55.   if (isFunction(setupResult)) {
  56.     instance.render = setupResult as InternalRenderFunction
  57.   } else if (isObject(setupResult)) {
  58.     instance.setupState = proxyRefs(setupResult)
  59.   }
  60. }

在 setupStatefulComponent 函数中，获取用户编写的 setup 函数，执行它并获取 setup 函数的返回值 setupResult。

接下来使用 handleSetupResult 函数处理结果，如果 setupResult 是一个函数的话，则将它赋值给组件实例的 render 属性，如果 setupResult 是一个对象的话，则将它赋值给组件实例的 setupState 属性上，当我们想在 render 函数中访问 setup 函数返回的数据时，Vue 会将读取操作代理到 setupState 属性上，源码如下所示：

  1. export const PublicInstanceProxyHandlers = {
  2.   get({ _: instance }: ComponentRenderContext, key: string) {
  3.     const { ctx, setupState, data, props, accessCache, type, appContext } =
  4.       instance
  5.  
  6.     if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
  7.       accessCache![key] = AccessTypes.SETUP
  8.       return setupState[key]
  9.     } 
  10.     ......
  11.   }
  12. };

6，组件生命周期的实现原理

组件的生命周期原理很简单，主要分为两部分，分别是生命周期的注册以及生命周期的执行。

首先说生命周期的注册，这里以 setup 函数中进行的生命周期注册为例。

  1. function setupStatefulComponent(instance) {
  2.   const Component = instance.type as ComponentOptions
  3.   ......
  4.   const { setup } = Component
  5.   if (setup) {
  6.     setCurrentInstance(instance)
  7.     const setupResult = callWithErrorHandling(
  8.       setup,
  9.       instance,
  10.       ErrorCodes.SETUP_FUNCTION,
  11.       [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
  12.     )
  13.     unsetCurrentInstance()
  14.     handleSetupResult(instance, setupResult, isSSR)
  15.   }
  16. }
  17.  
  18.  
  19. export let currentInstance: ComponentInternalInstance | null = null
  20.  
  21. export const setCurrentInstance = (instance: ComponentInternalInstance) => {
  22.   currentInstance = instance
  23. }
  24.  
  25. export const unsetCurrentInstance = () => {
  26.   currentInstance = null
  27. }

在生命周期函数执行前，会执行一个 setCurrentInstance 函数，这个函数的作用是将当前的组件实例设置到全局中。

接下来看生命周期注册函数的内容，以 onMounted 函数为例：

  1. export const onMounted = createHook(LifecycleHooks.MOUNTED)
  2.  
  3. export const createHook =
  4.   <T extends Function = () => any>(lifecycle: LifecycleHooks) =>
  5.   (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
  6.     // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
  7.     (!isInSSRComponentSetup || lifecycle === LifecycleHooks.SERVER_PREFETCH) &&
  8.     injectHook(lifecycle, hook, target)
  9.  
  10. export function injectHook(
  11.   type: LifecycleHooks,
  12.   hook: Function & { __weh?: Function },
  13.   target: ComponentInternalInstance | null = currentInstance,
  14.   prepend: boolean = false
  15. ): Function | undefined {
  16.   if (target) {
  17.     const hooks = target[type] || (target[type] = [])
  18.     const wrappedHook =
  19.       hook.__weh ||
  20.       (hook.__weh = (...args: unknown[]) => {
  21.         if (target.isUnmounted) {
  22.           return
  23.         }
  24.         // disable tracking inside all lifecycle hooks
  25.         // since they can potentially be called inside effects.
  26.         pauseTracking()
  27.         // Set currentInstance during hook invocation.
  28.         // This assumes the hook does not synchronously trigger other hooks, which
  29.         // can only be false when the user does something really funky.
  30.         setCurrentInstance(target)
  31.         const res = callWithAsyncErrorHandling(hook, target, type, args)
  32.         unsetCurrentInstance()
  33.         resetTracking()
  34.         return res
  35.       })
  36.     if (prepend) {
  37.       hooks.unshift(wrappedHook)
  38.     } else {
  39.       hooks.push(wrappedHook)
  40.     }
  41.     return wrappedHook
  42.   }
  43. }

当我们在 setup 函数中执行 onMounted 等生命周期注册函数时，Vue 会将我们想要注册的生命周期函数保存到组件实例中，组件实例用于保存生命周期函数的属性如下所示：

  1. const instance: ComponentInternalInstance = {
  2.   // lifecycle hooks
  3.   bc: null,
  4.   c: null,
  5.   bm: null,
  6.   m: null,
  7.   bu: null,
  8.   u: null,
  9.   um: null,
  10.   bum: null,
  11.   da: null,
  12.   a: null,
  13.   rtg: null,
  14.   rtc: null,
  15.   ec: null,
  16.   sp: null
  17. }

知道了生命周期函数是如何注册的，接下来看看生命周期函数是如何触发的，生命周期函数触发的代码在 setupRenderEffect 函数中，代码如下所示：

  1. const setupRenderEffect: SetupRenderEffectFn = (
  2.   instance,
  3.   initialVNode,
  4.   container,
  5.   anchor,
  6.   parentSuspense,
  7.   isSVG,
  8.   optimized
  9. ) => {
  10.   const componentUpdateFn = () => {
  11.     // 使用组件实例的 isMounted 属性判断组件是否挂载
  12.     // 如果为属性为 false，说明还未挂载，所以执行挂载逻辑
  13.     // 如果属性为 true 的话，说明已经挂载，所以执行更新逻辑
  14.     if (!instance.isMounted) {
  15.       const { bm, m } = instance
  16.       
  17.       // beforeMount hook
  18.       // 触发执行 beforeMount 生命周期函数
  19.       if (bm) {
  20.         invokeArrayFns(bm)
  21.       }
  22.       // 执行 render 函数，获取组件当前的 VNode
  23.       const subTree = (instance.subTree = renderComponentRoot(instance))
  24.       // 使用 patch 函数进行组件内容的渲染
  25.       patch(
  26.         null,
  27.         subTree,
  28.         container,
  29.         anchor,
  30.         instance,
  31.         parentSuspense,
  32.         isSVG
  33.       )
  34.  
  35.       // mounted hook
  36.       // 触发执行 mounted 生命周期函数
  37.       if (m) {
  38.         queuePostRenderEffect(m, parentSuspense)
  39.       }
  40.       // 将组件实例的 isMounted 属性设为 true，表明当前的组件已经完成了挂载操作
  41.       instance.isMounted = true
  42.     } else {
  43.       let { bu, u } = instance
  44.  
  45.       // beforeUpdate hook
  46.       // 触发执行 beforeUpdate 生命周期函数
  47.       if (bu) {
  48.         invokeArrayFns(bu)
  49.       }
  50.       // render
  51.       // 执行 render 函数，获取组件最新的 VNode
  52.       const nextTree = renderComponentRoot(instance)
  53.       // 获取组件上次渲染的 VNode
  54.       const prevTree = instance.subTree
  55.       instance.subTree = nextTree
  56.       // 使用 patch 函数进行组件的更新
  57.       patch(
  58.         prevTree,
  59.         nextTree,
  60.         // parent may have changed if it's in a teleport
  61.         hostParentNode(prevTree.el!)!,
  62.         // anchor may have changed if it's in a fragment
  63.         getNextHostNode(prevTree),
  64.         instance,
  65.         parentSuspense,
  66.         isSVG
  67.       )
  68.       // updated hook
  69.       // 触发执行 updated 生命周期函数
  70.       if (u) {
  71.         queuePostRenderEffect(u, parentSuspense)
  72.       }
  73.     }
  74.   }
  75.  
  76.   // 组件的更新借助了响应式系统中的 ReactiveEffect 类
  77.   const effect = (instance.effect = new ReactiveEffect(
  78.     componentUpdateFn,
  79.     () => queueJob(update),
  80.     instance.scope // track it in component's effect scope
  81.   ))
  82.  
  83.   const update: SchedulerJob = (instance.update = () => effect.run())
  84.  
  85.   update()
  86. }

在 componentUpdateFn 函数中，进行了组件的初始挂载和更新，生命周期函数就是在这些操作的前后触发执行的，在上面的源码中，使用 invokeArrayFns 函数进行生命周期函数的触发执行，它的源码如下所示：

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

7，结语

这篇博客讲解了 Vue3 中是如何实现组件化的，下面的博客详细讲讲异步组件以及 Vue 提供的一些内置组件。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/751951
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号