• Vue3是如何挂载组件的--源码解读（一）

    目录

    Vue.createApp(App).mount('#app')执行过程

    1.创建app入口

    2.render函数

    3.返回app

    mount

    App组件的挂载和渲染过程

    1. patch:进行diff算法.

    2. 处理组件节点.

    3. 调用mountComponent挂载组件

    4. 初始化component,对组件的数据进行赋值和操作

    5. 调用设置和渲染的副作用函数

    6. 调用了副作用函数effect()

    7. renderComponentRoot,对template进行渲染

    8. 把subTree子树的VNode挂载到container上,调用patch()

    9. 处理DOM元素,比如div/button/span(每个子树subtree)

    10. 如果还有子元素,进行patch之后,进行挂载

    11.12.13. 处理子节点,进行挂载

    Vue.createApp(App).mount('#app')执行过程

    1.创建app入口

    来到runtime-dom>src>index.ts文件

    1. // 创建app入口
    2. export const createApp = ((...args) => {
    3.   // 创建app使用渲染器ensureRenderer()
    4.   // 渲染器有返回createApp属性，createApp调用之后返回app
    5.   const app = ensureRenderer().createApp(...args)
    6.  
    7.   if (__DEV__) {
    8.     injectNativeTagCheck(app)
    9.     injectCompilerOptionsCheck(app)
    10.   }
    11. // 从app取出mount
    12.   const { mount } = app
    13.   // 将app.mount函数进行重写，函数原本传入属性，而我们传入‘#app’字符串
    14.   // 重写mount函数是为了跨平台
    15.   app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    16.     // normalizeContainer通过querySelector获取到container对象
    17.     const container = normalizeContainer(containerOrSelector)
    18.     if (!container) return
    19.  
    20.     const component = app._component
    21.     if (!isFunction(component) && !component.render && !component.template) {
    22.       // __UNSAFE__
    23.       // Reason: potential execution of JS expressions in in-DOM template.
    24.       // The user must make sure the in-DOM template is trusted. If it's
    25.       // rendered by the server, the template should not contain any user data.
    26.       // 原因：在 DOM 模板中可能执行 JS 表达式。
    27.       // 用户必须确保 DOM 模板是受信任的。如果是
    28.       // 由服务器呈现，模板不应包含任何用户数据。
    29.       component.template = container.innerHTML
    30.       // 2.x compat check
    31.       if (__COMPAT__ && __DEV__) {
    32.         for (let i = 0; i < container.attributes.length; i++) {
    33.           const attr = container.attributes[i]
    34.           if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {
    35.             compatUtils.warnDeprecation(
    36.               DeprecationTypes.GLOBAL_MOUNT_CONTAINER,
    37.               null
    38.             )
    39.             break
    40.           }
    41.         }
    42.       }
    43.     }
    44.  
    45.     // clear content before mounting
    46.     // 先清空container中的原本内容
    47.     container.innerHTML = ''
    48.     const proxy = mount(container, false, container instanceof SVGElement)
    49.     if (container instanceof Element) {
    50.       container.removeAttribute('v-cloak')
    51.       container.setAttribute('data-v-app', '')
    52.     }
    53.     return proxy
    54.   }
    55.  
    56.   return app
    57. }) as CreateAppFunction<Element>

    2.render函数

    来到runtime-core>src>renderer.ts文件

    1. // render函数传入baseCreatoRenderer()的返回值中
    2.   const render: RootRenderFunction = (vnode, container, isSVG) => {
    3.     if (vnode == null) {
    4.       if (container._vnode) {
    5.         unmount(container._vnode, null, null, true)
    6.       }
    7.     } else {
    8.       patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    9.     }
    10.     flushPostFlushCbs()
    11.     container._vnode = vnode
    12.   }
    13.  
    14.   const internals: RendererInternals = {
    15.     p: patch,
    16.     um: unmount,
    17.     m: move,
    18.     r: remove,
    19.     mt: mountComponent,
    20.     mc: mountChildren,
    21.     pc: patchChildren,
    22.     pbc: patchBlockChildren,
    23.     n: getNextHostNode,
    24.     o: options
    25.   }
    26.  
    27.   let hydrate: ReturnType<typeof createHydrationFunctions>[0] | undefined
    28.   let hydrateNode: ReturnType<typeof createHydrationFunctions>[1] | undefined
    29.   if (createHydrationFns) {
    30.     ;[hydrate, hydrateNode] = createHydrationFns(
    31.       internals as RendererInternals<Node, Element>
    32.     )
    33.   }
    34.   // baseCreatoRenderer()返回 createApp
    35.   return {
    36.     render,
    37.     hydrate,//ssr服务端错误
    38.     // createAppAPI函数使用了柯里化
    39.     createApp: createAppAPI(render, hydrate)
    40.   }
    41. }

    3.返回app

    来到runtime-core>src>apiCreateApp.ts文件

    1. // createApp最终返回createAppAPI() 返回app对象
    2. export function createAppAPI<HostElement>(
    3.   render: RootRenderFunction,
    4.   hydrate?: RootHydrateFunction
    5. ): CreateAppFunction<HostElement> {
    6.   // 返回createApp
    7.   return function createApp(rootComponent, rootProps = null) {
    8.     if (!isFunction(rootComponent)) {
    9.       rootComponent = { ...rootComponent }
    10.     }
    11.  
    12.     if (rootProps != null && !isObject(rootProps)) {
    13.       __DEV__ && warn(`root props passed to app.mount() must be an object.`)
    14.       rootProps = null
    15.     }
    16.  
    17.     const context = createAppContext()
    18.     const installedPlugins = new Set()
    19.  
    20.     let isMounted = false
    21. // app对象 app.mixin.directive.comoinebt 创建一个app对象
    22.     const app: App = (context.app = {
    23.       _uid: uid++,
    24.       _component: rootComponent as ConcreteComponent,
    25.       _props: rootProps,
    26.       _container: null,
    27.       _context: context,
    28.       _instance: null,
    29.  
    30.       version,
    31.  
    32.       get config() {
    33.         return context.config
    34.       },
    35.  
    36.       set config(v) {
    37.         if (__DEV__) {
    38.           warn(
    39.             `app.config cannot be replaced. Modify individual options instead.`
    40.           )
    41.         }
    42.       },
    43.  
    44.       use(plugin: Plugin, ...options: any[]) {
    45.         if (installedPlugins.has(plugin)) {
    46.           __DEV__ && warn(`Plugin has already been applied to target app.`)
    47.         } else if (plugin && isFunction(plugin.install)) {
    48.           installedPlugins.add(plugin)
    49.           plugin.install(app, ...options)
    50.         } else if (isFunction(plugin)) {
    51.           installedPlugins.add(plugin)
    52.           plugin(app, ...options)
    53.         } else if (__DEV__) {
    54.           warn(
    55.             `A plugin must either be a function or an object with an "install" ` +
    56.               `function.`
    57.           )
    58.         }
    59.         return app
    60.       },
    61.  
    62.       mixin(mixin: ComponentOptions) {
    63.         if (__FEATURE_OPTIONS_API__) {
    64.           if (!context.mixins.includes(mixin)) {
    65.             context.mixins.push(mixin)
    66.           } else if (__DEV__) {
    67.             warn(
    68.               'Mixin has already been applied to target app' +
    69.                 (mixin.name ? `: ${mixin.name}` : '')
    70.             )
    71.           }
    72.         } else if (__DEV__) {
    73.           warn('Mixins are only available in builds supporting Options API')
    74.         }
    75.         return app
    76.       },
    77.  
    78.       component(name: string, component?: Component): any {
    79.         if (__DEV__) {
    80.           validateComponentName(name, context.config)
    81.         }
    82.         if (!component) {
    83.           return context.components[name]
    84.         }
    85.         if (__DEV__ && context.components[name]) {
    86.           warn(`Component "${name}" has already been registered in target app.`)
    87.         }
    88.         context.components[name] = component
    89.         return app
    90.       },
    91.  
    92.       directive(name: string, directive?: Directive) {
    93.         if (__DEV__) {
    94.           validateDirectiveName(name)
    95.         }
    96.  
    97.         if (!directive) {
    98.           return context.directives[name] as any
    99.         }
    100.         if (__DEV__ && context.directives[name]) {
    101.           warn(`Directive "${name}" has already been registered in target app.`)
    102.         }
    103.         context.directives[name] = directive
    104.         return app
    105.       },
    106.  
    107.       mount(
    108.         rootContainer: HostElement,
    109.         isHydrate?: boolean,
    110.         isSVG?: boolean
    111.       ): any {
    112.         if (!isMounted) {
    113.           // #5571
    114.           if (__DEV__ && (rootContainer as any).__vue_app__) {
    115.             warn(
    116.               `There is already an app instance mounted on the host container.\n` +
    117.                 ` If you want to mount another app on the same host container,` +
    118.                 ` you need to unmount the previous app by calling \`app.unmount()\` first.`
    119.             )
    120.           }
    121.           const vnode = createVNode(
    122.             rootComponent as ConcreteComponent,
    123.             rootProps
    124.           )
    125.           // store app context on the root VNode.
    126.           // this will be set on the root instance on initial mount.
    127.           vnode.appContext = context
    128.  
    129.           // HMR root reload
    130.           if (__DEV__) {
    131.             context.reload = () => {
    132.               render(cloneVNode(vnode), rootContainer, isSVG)
    133.             }
    134.           }
    135.  
    136.           if (isHydrate && hydrate) {
    137.             hydrate(vnode as VNode<Node, Element>, rootContainer as any)
    138.           } else {
    139.             render(vnode, rootContainer, isSVG)
    140.           }
    141.           isMounted = true
    142.           app._container = rootContainer
    143.           // for devtools and telemetry
    144.           ;(rootContainer as any).__vue_app__ = app
    145.  
    146.           if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
    147.             app._instance = vnode.component
    148.             devtoolsInitApp(app, version)
    149.           }
    150.  
    151.           return getExposeProxy(vnode.component!) || vnode.component!.proxy
    152.         } else if (__DEV__) {
    153.           warn(
    154.             `App has already been mounted.\n` +
    155.               `If you want to remount the same app, move your app creation logic ` +
    156.               `into a factory function and create fresh app instances for each ` +
    157.               `mount - e.g. \`const createMyApp = () => createApp(App)\``
    158.           )
    159.         }
    160.       },
    161.  
    162.       unmount() {
    163.         if (isMounted) {
    164.           render(null, app._container)
    165.           if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
    166.             app._instance = null
    167.             devtoolsUnmountApp(app)
    168.           }
    169.           delete app._container.__vue_app__
    170.         } else if (__DEV__) {
    171.           warn(`Cannot unmount an app that is not mounted.`)
    172.         }
    173.       },
    174.  
    175.       provide(key, value) {
    176.         if (__DEV__ && (key as string | symbol) in context.provides) {
    177.           warn(
    178.             `App already provides property with key "${String(key)}". ` +
    179.               `It will be overwritten with the new value.`
    180.           )
    181.         }
    182.  
    183.         context.provides[key as string | symbol] = value
    184.  
    185.         return app
    186.       }
    187.     })
    188.  
    189.     if (__COMPAT__) {
    190.       installAppCompatProperties(app, context, render)
    191.     }
    192.  
    193.     return app
    194.   }
    195. }

    mount

    来到runtime-core>src>renderer.ts文件

    1. // 如果还有子元素，进行pathch之后，进行挂载
    2.         mountChildren(
    3.           vnode.children as VNodeArrayChildren,
    4.           el,
    5.           null,
    6.           parentComponent,
    7.           parentSuspense,
    8.           isSVG && type !== 'foreignObject',
    9.           slotScopeIds,
    10.           optimized
    11.         )
    1. const mountChildren: MountChildrenFn = (
    2.     children,
    3.     container,
    4.     anchor,
    5.     parentComponent,
    6.     parentSuspense,
    7.     isSVG,
    8.     slotScopeIds,
    9.     optimized,
    10.     start = 0
    11.   ) => {
    12.     // 12.对子节点进行遍历
    13.     for (let i = start; i < children.length; i++) {
    14.       const child = (children[i] = optimized
    15.         ? cloneIfMounted(children[i] as VNode)
    16.         : normalizeVNode(children[i]))
    17.         // 13。遍历后进行挂载
    18.       patch(
    19.         null,
    20.         child,
    21.         container,
    22.         anchor,
    23.         parentComponent,
    24.         parentSuspense,
    25.         isSVG,
    26.         slotScopeIds,
    27.         optimized
    28.       )
    29.     }
    30.   }
    1.       //片段只能有数组子级 因为它们要么由编译器生成，要么隐式创建 从数组。 
    2.       // 拿到fragment的所有根组件，拿到子树元素，进行挂载
    3.       mountChildren(
    4.         // n2.children所有的子元素
    5.         n2.children as VNodeArrayChildren,
    6.         container,
    7.         fragmentEndAnchor,
    8.         parentComponent,
    9.         parentSuspense,
    10.         isSVG,
    11.         slotScopeIds,
    12.         optimized
    13.       )

    创建流程图：

      

    App组件的挂载和渲染过程

    大致分为13步,具体如下：

    1. patch:进行diff算法.

    1.  // 注意：此闭包中的函数应使用 'const xxx = （） => {}'
    2.   // 样式，以防止被小写器内联。
    3.   // patch:进行diff算法，crateApp->vnode->element
    4.   const patch: PatchFn = (
    5.     n1,//旧的vnode，n1为空，进行挂载
    6.     n2,//新的vnode,n2与n1不同时，进行patch（diff算法）
    7.     container,//patch或mount之后，将vnode挂载到container上
    8.     anchor = null,
    9.     parentComponent = null,
    10.     parentSuspense = null,
    11.     isSVG = false,
    12.     slotScopeIds = null,
    13.     optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
    14.   ) => {

    2. 处理组件节点.

    1.  } else if (shapeFlag & ShapeFlags.COMPONENT) {
    2.           // 处理组件节点，vnode-> 按组件进行处理
    3.           processComponent(
    4.             n1,
    5.             n2,
    6.             container,
    7.             anchor,
    8.             parentComponent,
    9.             parentSuspense,
    10.             isSVG,
    11.             slotScopeIds,
    12.             optimized
    13.           )
    14.         }

    进入processComponent

    1. // 处理组件类型节点
    2.   const processComponent = (
    3.     n1: VNode | null,
    4.     n2: VNode,
    5.     container: RendererElement,
    6.     anchor: RendererNode | null,
    7.     parentComponent: ComponentInternalInstance | null,
    8.     parentSuspense: SuspenseBoundary | null,
    9.     isSVG: boolean,
    10.     slotScopeIds: string[] | null,
    11.     optimized: boolean
    12.   ) => {

    3. 调用mountComponent挂载组件

    1.    // 调用mountComponent挂载组件
    2.         mountComponent(
    3.           n2,
    4.           container,
    5.           anchor,
    6.           parentComponent,
    7.           parentSuspense,
    8.           isSVG,
    9.           optimized
    10.         )
    11.       }

    4. 初始化component,对组件的数据进行赋值和操作

    1.       // 初始化component,对组件的数据进行赋值和操作
    2.       // setup组件实例，对组件的props/emits/slots/data进行初始化
    3.       setupComponent(instance)//执行完之后组件啥都有了
    4.       if (__DEV__) {
    5.         endMeasure(instance, `init`)
    6.       }
    7.     }
    8.  
    9.     // setup() is async. This component relies on async logic to be resolved
    10.     // before proceeding
    11. //     setup（） 是异步的。此组件依赖于要解析的异步逻辑
    12. //      在继续之前 
    13.     if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
    14.       parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)
    15.  
    16.       // Give it a placeholder if this is not hydration
    17.       // TODO handle self-defined fallback
    18.       if (!initialVNode.el) {
    19.         const placeholder = (instance.subTree = createVNode(Comment))
    20.         processCommentNode(null, placeholder, container!, anchor)
    21.       }
    22.       return
    23.     }

    5. 调用设置和渲染的副作用函数

    1.     // 调用设置和渲染的副作用函数
    2.     setupRenderEffect(
    3.       instance,
    4.       initialVNode,
    5.       container,
    6.       anchor,
    7.       parentSuspense,
    8.       isSVG,
    9.       optimized
    10.     )

    副作用函数

    1.   // 副作用函数
    2.   const setupRenderEffect: SetupRenderEffectFn = (
    3.     instance,
    4.     initialVNode,
    5.     container,
    6.     anchor,
    7.     parentSuspense,
    8.     isSVG,
    9.     optimized
    10.   ) => {

    6. 调用了副作用函数effect()

    1. // 调用了副作用函数effect()他来着reactive响应式系统，使用响应式数据时，默认进行依赖收集，进行再次执行
    2.     const update: SchedulerJob = (instance.update = () => effect.run())
    3.     update.id = instance.uid
    4.     // allowRecurse
    5.     // #1801, #2043 component render effects should allow recursive updates
    6.                     //组件渲染效果应允许递归更新
    7.     toggleRecurse(instance, true)
    8.  
    9.     if (__DEV__) {
    10.       effect.onTrack = instance.rtc
    11.         ? e => invokeArrayFns(instance.rtc!, e)
    12.         : void 0
    13.       effect.onTrigger = instance.rtg
    14.         ? e => invokeArrayFns(instance.rtg!, e)
    15.         : void 0
    16.       update.ownerInstance = instance
    17.     }

    7. renderComponentRoot,对template进行渲染

    1.  // 7. renderComponentRoot,对template进行渲染
    2.             // subTree是template里面的子树，子树被包裹
    3.             instance.subTree = renderComponentRoot(instance)
    4.             if (__DEV__) {
    5.               endMeasure(instance, `render`)
    6.             }
    7.             if (__DEV__) {
    8.               startMeasure(instance, `hydrate`)
    9.             }

    8. 把subTree子树的VNode挂载到container上,调用patch()

    1.  // 8. 把subTree子树的VNode挂载到container上,调用patch()
    2.           patch(
    3.             null,//因为是挂载所以是null
    4.             subTree,
    5.             container,
    6.             anchor,
    7.             instance,
    8.             parentSuspense,
    9.             isSVG
    10.           )

    9. 处理DOM元素,比如div/button/span(每个子树subtree)

    1.   // 9. 处理DOM元素,比如div/button/span(每个子树subtree)
    2.         if (shapeFlag & ShapeFlags.ELEMENT) {
    3.           processElement(
    4.             n1,
    5.             n2,
    6.             container,
    7.             anchor,
    8.             parentComponent,
    9.             parentSuspense,
    10.             isSVG,
    11.             slotScopeIds,
    12.             optimized
    13.           )

    进入processElement

    1.  // 如果template的根元素是div
    2.   const processElement = (
    3.     n1: VNode | null,
    4.     n2: VNode,
    5.     container: RendererElement,
    6.     anchor: RendererNode | null,
    7.     parentComponent: ComponentInternalInstance | null,
    8.     parentSuspense: SuspenseBoundary | null,
    9.     isSVG: boolean,
    10.     slotScopeIds: string[] | null,
    11.     optimized: boolean
    12.   ) => {
    13.     isSVG = isSVG || (n2.type as string) === 'svg'
    14.     if (n1 == null) {
    15.       // 调用mountElement进行挂载元素
    16.       mountElement(
    17.         n2,
    18.         container,
    19.         anchor,
    20.         parentComponent,
    21.         parentSuspense,
    22.         isSVG,
    23.         slotScopeIds,
    24.         optimized
    25.       )
    26.     } else {

    10. 如果还有子元素,进行patch之后,进行挂载

    1.  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    2.       // 如果还有子元素，进行pathch之后，进行挂载
    3.         mountChildren(
    4.           vnode.children as VNodeArrayChildren,
    5.           el,
    6.           null,
    7.           parentComponent,
    8.           parentSuspense,
    9.           isSVG && type !== 'foreignObject',
    10.           slotScopeIds,
    11.           optimized
    12.         )
    13.       }

    11.12.13. 处理子节点,进行挂载

    1.  // 11.挂载子节点
    2.   const mountChildren: MountChildrenFn = (
    3.     children,
    4.     container,
    5.     anchor,
    6.     parentComponent,
    7.     parentSuspense,
    8.     isSVG,
    9.     slotScopeIds,
    10.     optimized,
    11.     start = 0
    12.   ) => {
    13.     // 12.对子节点进行遍历
    14.     for (let i = start; i < children.length; i++) {
    15.       const child = (children[i] = optimized
    16.         ? cloneIfMounted(children[i] as VNode)
    17.         : normalizeVNode(children[i]))
    18.         // 13。遍历后进行挂载
    19.       patch(
    20.         null,
    21.         child,
    22.         container,
    23.         anchor,
    24.         parentComponent,
    25.         parentSuspense,
    26.         isSVG,
    27.         slotScopeIds,
    28.         optimized
    29.       )
    30.     }
    31.   }

    最后给大家找了个流程图方便大家理解：

    如果大家觉得还不错，下方公z号👇，来跟作者一起学习吧！ 

  • 相关阅读:
    kafka安装
    计算机毕业设计选什么题目好？springboot 个人健康信息管理系统
    day01_计算机基础和环境搭建
    【线性代数】【一】 1.4 矩阵运算
    ATT&CK框架现有的14个战术进行了详细介绍
    Kafka核心组件详解
    关于操作系统中对进程管理的认识
    SpringBoot基础（九）-- 配置文件优先级
    React 之 react-router-dom
    SpringBoot+vue实现前后端分离的摄影跟拍预定管理系统
  • 原文地址：https://blog.csdn.net/weixin_52691965/article/details/126043512