Vue 3.0 进阶之应用挂载的过程之一
本文转载自微信公众号「全栈修仙之路」，进阶作者阿宝哥。应用转载本文请联系全栈修仙之路公众号。挂载
本文是进阶 Vue 3.0 进阶系列 的第八篇文章，在这篇文章中，应用阿宝哥将带大家一起探索 Vue 3 中应用挂载的挂载过程。在开始介绍应用挂载的进阶过程之前，我们先来简单回顾一下第七篇介绍的应用 应用创建的过程：
一、应用挂载
在创建完 app 对象之后，挂载就会调用 app.mount 方法执行应用挂载操作：
<div id="app"></div> <script> const { createApp,进阶 h } = Vue const app = createApp({ // ① data() { return { name: 我是阿宝哥 } }, template: `<div>大家好, { { name}}!</div>` }) app.mount(#app) // ② </script>虽然 app.mount 方法用起来很简单，但它内部涉及的应用处理逻辑还是蛮复杂的。这里阿宝哥利用 Chrome 开发者工具的挂载 Performance 标签栏，记录了应用挂载的进阶主要过程：
接下来，阿宝哥就会以前面的应用示例为例，来详细分析一下应用挂载过程中涉及的挂载主要函数。
1.1 app.mount
app.mount 被定义在 runtime-dom/src/index.ts 文件中，具体实现如下所示：
// packages/runtime-dom/src/index.ts app.mount = (containerOrSelector: Element | ShadowRoot | string): any => { const container = normalizeContainer(containerOrSelector) // ① 同时支持字符串和DOM对象 if (!container) return const component = app._component // 若根组件非函数对象且未设置render和template属性，则使用容器的innerHTML作为模板的内容 if (!isFunction(component) && !component.render && !component.template) { // ② component.template = container.innerHTML } container.innerHTML = // 在挂载前清空容器内容 const proxy = mount(container, false, container instanceof SVGElement) // ③ if (container instanceof Element) { container.removeAttribute(v-cloak) // 避免在网络不好或加载数据过大的云服务器情况下，页面渲染的过程中会出现Mustache标签 container.setAttribute(data-v-app, ) } return proxy }在 app.mount 方法内部主要分为以下 3 个流程：
规范化容器，normalizeContainer 函数参数 container 的类型是一个联合类型：Element | ShadowRoot | string，如果传入参数是字符串类型的话，会通过 document.querySelector API 来获取选择器对应的 DOM 元素。而对于其他类型的话，会直接返回传入的参数。 设置根组件的 template 属性，当根组件不是函数组件且根组件配置对象上没有 render 和 template 属性，则会使用容器元素上 innerHTML 的值作为根组件 template 属性的属性值。 调用 mount 方法执行真正的挂载操作。1.2 mount
对于 app.mount 方法来说，最核心的流程是 mount 方法，所以下一步我们就来分析 mount 方法。
// packages/runtime-core/src/apiCreateApp.ts export function createAppAPI<HostElement>( render: RootRenderFunction, hydrate?: RootHydrateFunction ): CreateAppFunction<HostElement> { return function createApp(rootComponent, rootProps = null) { const app: App = (context.app = { _container: null, _context: context, // 省略部分代码 mount( rootContainer: HostElement, isHydrate?: boolean, isSVG?: boolean ): any { if (!isMounted) { const vnode = createVNode( // ① 创建根组件对应的VNode对象 rootComponent as ConcreteComponent, rootProps ) vnode.appContext = context // ② 设置VNode对象上的应用上下文属性 // 省略部分代码 if (isHydrate && hydrate) { hydrate(vnode as VNode<Node, Element>, rootContainer as any) } else { render(vnode, rootContainer, isSVG) // ③ 执行渲染操作 } isMounted = true app._container = rootContainer ;(rootContainer as any).__vue_app__ = app return vnode.component!.proxy } }, }) return app } }1.3 render
观察以上的 mount 函数可知，网站模板在 mount 方法内部会调用继续调用 render 函数执行渲染操作，该函数的具体实现如下：
const render: RootRenderFunction = (vnode, container) => { if (vnode == null) { if (container._vnode) { unmount(container._vnode, null, null, true) } } else { patch(container._vnode || null, vnode, container) } flushPostFlushCbs() container._vnode = vnode }对于首次渲染来说，此时的 vnode 不为 null(基于根组件创建的 VNode 对象)，所以会执行 else 分支的流程，即调用 patch 函数。
1.4 patch
patch 函数被定义在 runtime-core/src/renderer.ts 文件中，该函数的签名如下所示：
// packages/runtime-core/src/renderer.ts const patch: PatchFn = ( n1, // old VNode n2, // new VNode container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = false ) => { //...}在 patch 函数内部，会根据 VNode 对象的类型执行不同的处理逻辑：
在上图中，我们看到了 Text、Comment 、Static 和 Fragment 这些类型，它们的定义如下：
// packages/runtime-core/src/vnode.ts export const Text = Symbol(__DEV__ ? Text : undefined) export const Comment = Symbol(__DEV__ ? Comment : undefined) export const Static = Symbol(__DEV__ ? Static : undefined) export const Fragment = (Symbol(__DEV__ ? Fragment : undefined) as any) as { __isFragment: true new (): { $props: VNodeProps } }除了上述的类型之外，在 default 分支，我们还看到了 ShapeFlags，该对象是一个枚举：
// packages/shared/src/shapeFlags.ts export const enum ShapeFlags { ELEMENT = 1, FUNCTIONAL_COMPONENT = 1 << 1, STATEFUL_COMPONENT = 1 << 2, TEXT_CHILDREN = 1 << 3, ARRAY_CHILDREN = 1 << 4, SLOTS_CHILDREN = 1 << 5, TELEPORT = 1 << 6, SUSPENSE = 1 << 7, COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, COMPONENT_KEPT_ALIVE = 1 << 9, COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT }那么 ShapeFlags 标志是什么时候设置的呢?其实在创建 VNode 对象时，就会设置该对象的 shapeFlag 属性，对应的判断规则如下所示：
// packages/runtime-core/src/vnode.ts function _createVNode( type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT, props: (Data & VNodeProps) | null = null, children: unknown = null, patchFlag: number = 0, dynamicProps: string[] | null = null, isBlockNode = false ): VNode { // 省略大部分方法 const shapeFlag = isString(type)// 字符串类型 ? ShapeFlags.ELEMENT : __FEATURE_SUSPENSE__ && isSuspense(type) // SUSPENSE类型 ? ShapeFlags.SUSPENSE : isTeleport(type) // TELEPORT类型 ? ShapeFlags.TELEPORT : isObject(type) // 对象类型 ? ShapeFlags.STATEFUL_COMPONENT : isFunction(type) // 函数类型 ? ShapeFlags.FUNCTIONAL_COMPONENT : 0 const vnode: VNode = { __v_isVNode: true, [ReactiveFlags.SKIP]: true, // 省略大部分属性 shapeFlag, appContext: null } normalizeChildren(vnode, children) return vnode }1.5 processComponent
由以上代码可知，对于我们示例来说，根组件对应的站群服务器 VNode 对象上 shapeFlag 的值为 ShapeFlags.STATEFUL_COMPONENT。因此，在执行 patch 方法时，将会调用 processComponent 函数：
// packages/runtime-core/src/renderer.ts const processComponent = ( n1: VNode | null, n2: VNode, container: RendererElement, anchor: RendererNode | null, parentComponent: ComponentInternalInstance | null, parentSuspense: SuspenseBoundary | null, isSVG: boolean, optimized: boolean ) => { if (n1 == null) { // 首次渲染 if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) { // 处理keep-alive组件 } else { mountComponent( n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized ) } } else { // 更新操作 updateComponent(n1, n2, optimized) } }1.6 mountComponent
对于首次渲染的场景，n1 的值为 null，我们的组件又不是 keep-alive 组件，所以会调用 mountComponent 函数挂载组件：
// packages/runtime-core/src/renderer.ts const mountComponent: MountComponentFn = ( initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized ) => { // 省略部分代码 // ① 创建组件实例 const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance( initialVNode, parentComponent, parentSuspense )) // ② 初始化组件实例 setupComponent(instance) // ③ 设置渲染副作用函数 setupRenderEffect( instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized ) }在 mountComponent 函数内部，主要含有 3 个步骤：
调用 createComponentInstance 函数创建组件实例; 调用 setupComponent 函数初始化组件实例; 调用 setupRenderEffect 函数，设置渲染副作用函数。1.7 createComponentInstance
下面我们将会逐一分析上述的 3 个步骤：
// packages/runtime-core/src/component.ts export function createComponentInstance( vnode: VNode, parent: ComponentInternalInstance | null, suspense: SuspenseBoundary | null ) { const type = vnode.type as ConcreteComponent // inherit parent app context - or - if root, adopt from root vnode const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext const instance: ComponentInternalInstance = { // 创建组件实例 uid: uid++, vnode, type, parent, appContext, root: null!, next: null, subTree: null!, update: null!, render: null, proxy: null, exposed: null, withProxy: null, effects: null, provides: parent ? parent.provides : Object.create(appContext.provides), // ... } if (__DEV__) { instance.ctx = createRenderContext(instance) } else { instance.ctx = { _: instance } // 设置实例上的上下文属性ctx } instance.root = parent ? parent.root : instance instance.emit = emit.bind(null, instance) // 设置emit属性，用于派发自定义事件 return instance }调用 createComponentInstance 函数后，会返回一个包含了多种属性的组件实例对象。
1.8 setupComponent
此外，在创建完组件实例后，会调用 setupComponent 函数执行组件初始化操作：
// packages/runtime-core/src/component.ts export function setupComponent( instance: ComponentInternalInstance, isSSR = false ) { isInSSRComponentSetup = isSSR const { props, children } = instance.vnode const isStateful = isStatefulComponent(instance) // 判断是否状态组件 initProps(instance, props, isStateful, isSSR) // 初始化props属性 initSlots(instance, children) // 初始化slots const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) // 初始化有状态组件 : undefined isInSSRComponentSetup = false return setupResult }在 setupComponent 函数中，会分别调用 initProps 和 initSlots 函数来初始化组件实例的 props 属性和 slots 属性。之后会通过 isStatefulComponent 函数来判断组件的类型：
// packages/runtime-core/src/component.ts export function isStatefulComponent(instance: ComponentInternalInstance) { return instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT } // 在createVNode函数内部，会根据组件的type类型设置ShapeFlags标识 const shapeFlag = isString(type) ? ShapeFlags.ELEMENT : __FEATURE_SUSPENSE__ && isSuspense(type) ? ShapeFlags.SUSPENSE : isTeleport(type) ? ShapeFlags.TELEPORT : isObject(type) // ComponentOptions 类型 ? ShapeFlags.STATEFUL_COMPONENT : isFunction(type) // 函数式组件 ? ShapeFlags.FUNCTIONAL_COMPONENT : 0很明显，如果 type 是对象类型，则组件是有状态组件。而如果 type 是函数类型的话，则组件是函数组件。
1.9 setupStatefulComponent
对于有状态组件来说，还会继续调用 setupStatefulComponent 函数来初始化有状态组件：
// packages/runtime-core/src/component.ts function setupStatefulComponent( instance: ComponentInternalInstance, isSSR: boolean ) { const Component = instance.type as ComponentOptions // 组件配置对象 // 0. create render proxy property access cache instance.accessCache = Object.create(null) // 1. create public instance / render proxy // also mark it raw so its never observed instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers) // instance.ctx = { _: instance } // 2. call setup() const { setup } = Component // 组合式API中配置的setup函数 if (setup) { // 处理组合式API的setup函数 } else { finishComponentSetup(instance, isSSR) } }在 setupStatefulComponent 函数内部，主要也可以分为 3 个步骤：
在组件实例上设置 accessCache 属性，即创建 render proxy 属性的访问缓存; 使用 Proxy API 设置组件实例的 render proxy 属性; 判断组件配置对象上是否设置了 setup 属性，如果当前组件配置对象不包含 setup 属性，则会走 else 分支，即调用 finishComponentSetup 函数。接下来，我们来重点分析后面 2 个步骤。首先，我们先来分析 instance.proxy 属性。如果你对 Proxy API 不了解的话，可以看一下 你不知道的 Proxy 这篇文章。至于 proxy 属性有什么的作用，阿宝哥将在后续的文章中介绍。下面我们来回顾一下 Proxy 构造函数：
const p = new Proxy(target, handler)Proxy 构造函数支持两个参数：
target：要使用 Proxy 包装的目标对象(可以是任何类型的对象，包括原生数组，函数，甚至另一个代理)。 handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。对于 setupStatefulComponent 函数来说，target 参数指向的是组件实例 ctx 属性，即 { _: instance } 对象。而 handler 参数指向的是 PublicInstanceProxyHandlers 对象，该对象内部包含了 3 种类型的捕捉器：
// vue-next/packages/runtime-core/src/componentPublicInstance.ts export const PublicInstanceProxyHandlers: ProxyHandler<any> = { // 属性读取操作的捕捉器。 get({ _: instance }: ComponentRenderContext, key: string) { // ... }, // 属性设置操作的捕捉器。 set( { _: instance }: ComponentRenderContext, key: string, value: any ): boolean { // ... }, // in 操作符的捕捉器。 has( { _: { data, setupState, accessCache, ctx, appContext, propsOptions } }: ComponentRenderContext, key: string ) { // ... } }这里我们只要先知道 PublicInstanceProxyHandlers 对象中，包含了 get、set 和 has 这 3 种类型的捕捉器即可。至于捕捉器的内部处理逻辑，阿宝哥将在 Vue 3.0 进阶之应用挂载的过程下篇 中详细介绍。
1.10 finishComponentSetup
在设置好 instance.proxy 属性之后，会判断组件配置对象上是否设置了 setup 属性。对于前面的示例来说，会走 else 分支，即调用 finishComponentSetup 函数，该函数的具体实现如下：
// packages/runtime-core/src/component.ts function finishComponentSetup( instance: ComponentInternalInstance, isSSR: boolean ) { const Component = instance.type as ComponentOptions // template / render function normalization if (__NODE_JS__ && isSSR) { // 服务端渲染的场景 if (Component.render) { instance.render = Component.render as InternalRenderFunction } } else if (!instance.render) { // 组件实例中不包含render方法 // could be set from setup() if (compile && Component.template && !Component.render) { // 编译组件的模板生成渲染函数 Component.render = compile(Component.template, { isCustomElement: instance.appContext.config.isCustomElement, delimiters: Component.delimiters }) } // 把渲染函数添加到instance实例的render属性中 instance.render = (Component.render || NOOP) as InternalRenderFunction // for runtime-compiled render functions using `with` blocks, the render // proxy used needs a different `has` handler which is more performant and // also only allows a whitelist of globals to fallthrough. if (instance.render._rc) { instance.withProxy = new Proxy( instance.ctx, RuntimeCompiledPublicInstanceProxyHandlers ) } } }在分析 finishComponentSetup 函数前，我们来回顾一下示例中的代码：
const app = createApp({ data() { return { name: 我是阿宝哥 } }, template: `<div>大家好, { { name}}!</div>` })对于该示例而言，根组件配置对象并没有设置 render 属性。而且阿宝哥引入的是包含编译器的 vue.global.js 文件，所以会走 else if 分支。即会调用 compile 函数来对模板进行编译。那么编译后会生成什么呢?通过断点，我们可以轻易地看到模板编译后生成的渲染函数：
(function anonymous() { const _Vue = Vue return function render(_ctx, _cache) { with (_ctx) { const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue return (_openBlock(), _createBlock("div", null, "大家好, " + _toDisplayString(name) + "!", 1)) } } })观察以上的代码可知，调用渲染函数之后会返回 createBlock 函数的调用结果，即 VNode 对象。另外，在 render 函数中，会通过 with 来设置渲染上下文。那么该渲染函数什么时候会被调用呢?对于这个问题，感兴趣的小伙伴可以先自行研究一下。
出于篇幅考虑，阿宝哥把应用挂载的过程分为上下两篇，在下一篇文章中阿宝哥将重点介绍 setupRenderEffect 函数。介绍完该函数之后，你将会知道渲染函数什么时候会被调用，到时候也会涉及响应式 API 的一些相关知识，对这部分内容还不熟悉的小伙伴可以先看看 Vue 3 的官方文档。
最后，阿宝哥用一张流程图来总结一下本文介绍的主要内容：
本文主要介绍了在 Vue 3 中组件挂载过程中涉及的一些核心函数，出于篇幅考虑，阿宝哥只介绍其中的一部分函数。此外，为了让大家能够更深入地理解 App 挂载的过程，阿宝哥从源码的角度分析了核心函数中的主要处理逻辑。
在下一篇文章中，阿宝哥将会继续介绍应用挂载过程中剩余的内容，同时也会解答本文留下的问题，感兴趣的小伙伴请继续关注下一篇文章。
二、参考资源
MDN - Proxy Vue 3 官网 - 应用 API