Vue 3源码深度解析之：组件的挂载流程：从`app.mount()`到`patch`的完整路径。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的讲师，咱们今天聊聊Vue 3组件挂载这事儿，保证让大家听完之后，感觉就像打通了任督二脉，对Vue 3的理解更上一层楼！

开场白：组件挂载，生命之树的开端

组件挂载，说白了，就是把咱们写的Vue组件，从一个“抽象的概念”，变成浏览器里实际能看到的、能操作的DOM元素。想象一下，这就好像种一棵树，你得先有种子(组件定义)，然后找到合适的土壤(DOM容器)，最后才能让它生根发芽，茁壮成长(变成真实的DOM)。

第一步：app.mount()，启动引擎

首先，我们从app.mount()开始。这是Vue 3应用程序的启动指令。想象一下，你手里拿着一个Vue应用程序的蓝图（app），你想要把它“安装”到页面上的某个位置。 app.mount()就负责干这件事。

//main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app') // 将App组件挂载到id为'app'的DOM元素上

这段代码很简单，对吧？ createApp(App)创建了一个Vue应用程序实例，然后app.mount('#app')告诉Vue：“嘿，把这个App组件挂载到页面上id为’app’的元素里！”。

等等，app.mount()背后到底做了什么？我们来扒一扒它的源码（简化版）：

// packages/runtime-dom/src/index.ts (简化版)
import { createComponentApp } from '@vue/runtime-core'

export const createApp = (...args) => {
  const app = createComponentApp(...args) //runtime-core的createApp
  const { mount } = app
  app.mount = (containerOrSelector: Element | string) => {
    const container = normalizeContainer(containerOrSelector) //处理container
    if (!container) {
      return;
    }
    const component = app._component //根组件
    if (!isFunction(component)) { //不是函数组件，直接挂载
      component.appContext.app = app //绑定app实例
      app._instance = mountComponent(component, container)
    } else { // 函数组件需要先创建vnode
      const vnode = createVNode(component);
      app._instance = mountComponent(vnode, container)
    }
    return app._instance
  }

  return app
}

这里我们看到createApp调用了createComponentApp创建了一个app实例，然后重写了app实例上的mount方法。
mount函数里面首先会处理container,也就是挂载的dom元素，然后判断根组件是否是函数组件，如果是函数组件需要创建VNode。最后调用mountComponent进行挂载。

第二步：mountComponent()，真正的挂载启动

mountComponent 是真正执行组件挂载的函数。它位于 @vue/runtime-core 包中，是整个挂载流程的核心。

// packages/runtime-core/src/renderer.ts (简化版)
const mountComponent = (
  initialVNode,
  container,
  anchor = null,
  parentComponent = null,
  parentSuspense = null,
  isSVG = false,
  optimized = false
) => {

  const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense)) // 创建组件实例

  const { propsOptions } = instance.type //获取组件的props配置

  if (propsOptions) {
    // 校验props
    // 1.校验props的类型
    // 2.校验props是否是必传的
    // 3.处理props的默认值
    instance.props = resolveProps(propsOptions, initialVNode.props || {});
  }
  setupComponent(instance) // 初始化组件实例

  setupRenderEffect(
    instance,
    initialVNode,
    container,
    anchor,
    parentSuspense,
    isSVG,
    optimized
  )

}

mountComponent 里面做了这几件事：

创建组件实例 (createComponentInstance): 每个组件都需要一个实例来管理它的状态、props、方法等等。 createComponentInstance 就是负责创建这个实例的。
解析和校验props (resolveProps): 如果组件有props，这里会解析传入的props，并进行校验，确保类型正确，必填项已提供。
初始化组件实例 (setupComponent): 这是相当重要的一步。它会调用组件的 setup 函数（如果定义了），并处理 setup 函数的返回值。 setup 函数的返回值可以是渲染函数（render function），也可以是一个对象，这个对象会被合并到组件实例中。
建立渲染副作用 (setupRenderEffect): 这是挂载流程的关键一步，它负责创建组件的渲染副作用。简单来说，它会监听组件状态的变化，并在状态改变时重新渲染组件。

第三步：setupRenderEffect()，响应式更新的核心

setupRenderEffect 函数是建立渲染副作用的地方，它使用 effect 函数来创建一个响应式的渲染循环。

// packages/runtime-core/src/renderer.ts (简化版)
const setupRenderEffect = (
  instance,
  initialVNode,
  container,
  anchor,
  parentSuspense,
  isSVG,
  optimized
) => {
  const componentUpdateFn = () => {
    if (!instance.isMounted) { // 首次挂载
      const { bm, m, parent } = instance
      // beforeMount hook
      if (bm) {
        invokeArrayFns(bm)
      }
      const subTree = (instance.subTree = renderComponentRoot(instance)) // 渲染组件
      patch(
        null,
        subTree,
        container,
        anchor,
        instance,
        parentSuspense,
        isSVG
      ) // patch
      // mounted hook
      if (m) {
        queuePostRenderEffect(m)
      }
      instance.isMounted = true
    } else { // 更新
      let { next, vnode } = instance

      if (!next) {
        next = vnode
      }

      const nextTree = renderComponentRoot(instance) // 渲染组件
      const prevTree = vnode
      instance.vnode = next
      instance.subTree = nextTree
      patch(
        prevTree,
        nextTree,
        container,
        anchor,
        instance,
        parentSuspense,
        isSVG
      ) // patch
    }
  }

  const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update))

  const update = (instance.update = effect.run.bind(effect))

  update() // 首次执行
}

这里做了几件事：

创建 componentUpdateFn: 这个函数负责实际的组件渲染和更新。它会判断是首次挂载还是更新，然后调用 renderComponentRoot 获取组件的 VNode 树，最后调用 patch 函数将 VNode 树渲染到 DOM 上。
创建 ReactiveEffect: ReactiveEffect 是 Vue 3 响应式系统的核心。它会追踪 componentUpdateFn 中使用的所有响应式数据，并在这些数据发生变化时自动重新执行 componentUpdateFn。
执行 update(): 首次执行 update() 函数，触发首次渲染。

第四步：renderComponentRoot()，渲染组件的VNode树

renderComponentRoot 函数负责执行组件的渲染函数，并获取组件的 VNode 树。

// packages/runtime-core/src/componentRenderUtils.ts (简化版)
export function renderComponentRoot(
  instance: ComponentInternalInstance
): VNode {
  const {
    type: Component,
    vnode,
    proxy,
    withProxy,
    props,
    propsOptions,
    slots,
    attrs,
    emit,
    render,
    renderCache,
    data,
    computed,
    watch,
    provide,
    inject,
    directives,
    appContext,
  } = instance

  let result

  try {
    if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
      // with proxy
      result = normalizeVNode(render!.call(proxy!))
    } else {
      // functional component
      result = normalizeVNode(
        Component.length > 1
          ? Component(props, {
              attrs,
              slots,
              emit,
            })
          : Component(props, null as any)
      )
    }
  } catch (err: any) {
    // ... error handling
  }

  return result
}

这里主要做了两件事：

执行渲染函数: 调用组件的 render 函数（如果组件是状态组件）或者函数式组件本身，获取 VNode 树。
规范化 VNode (normalizeVNode): normalizeVNode 函数负责将渲染函数返回的各种类型的值转换为 VNode。例如，它可以将一个字符串转换为文本节点的 VNode。

第五步：patch()，Diff算法的战场

patch 函数是 Vue 3 中最核心的函数之一。它负责将 VNode 树渲染到 DOM 上，并处理新旧 VNode 树之间的差异。

patch(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)

参数说明：

n1: 旧的 VNode (如果是首次挂载，则为 null)
n2: 新的 VNode
container: DOM 容器
anchor: 插入位置的参考节点
parentComponent: 父组件实例
parentSuspense: 父 Suspense 组件实例
isSVG: 是否是 SVG 元素
optimized: 是否是优化模式

patch 函数的逻辑非常复杂，它会根据 VNode 的类型（例如，元素节点、文本节点、组件节点等）执行不同的操作。这里我们只关注一些关键的步骤：

判断 VNode 类型: 根据 n2.type 判断 VNode 的类型。
处理不同类型的 VNode:
- 元素节点: 创建 DOM 元素，设置属性，递归地 patch 子节点。
- 文本节点: 创建文本节点，设置文本内容。
- 组件节点: 挂载或更新组件。
Diff 算法: 如果存在旧的 VNode (n1)，则使用 Diff 算法比较新旧 VNode 树之间的差异，并只更新需要更新的部分。

patch 函数使用了大量的优化技巧，例如静态节点提升、动态属性缓存等等，以提高渲染性能。

我们来看一段简化的patch代码：

// packages/runtime-core/src/renderer.ts (简化版)
const patch = (
  n1,
  n2,
  container,
  anchor = null,
  parentComponent = null,
  parentSuspense = null,
  isSVG = false,
  optimized = false
) => {
  const { type, shapeFlag } = n2
  switch (type) {
    case Text:
      processText(n1, n2, container, anchor)
      break
    case Comment:
      processCommentNode(n1, n2, container, anchor)
      break
    case Static:
      processStaticContent(n1, n2, container, anchor, isSVG)
      break
    case Fragment:
      processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      break
    default:
      if (shapeFlag & ShapeFlags.ELEMENT) {
        processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (shapeFlag & ShapeFlags.COMPONENT) {
        processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
        processTeleport(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (shapeFlag & ShapeFlags.SUSPENSE) {
        processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (__DEV__) {
        warn('Invalid VNode type:', type, `(${typeof type})`)
      }
  }
}

这个代码展示了patch函数根据不同的type调用不同的处理函数，例如processElement处理元素节点, processComponent处理组件节点等。

第六步：processElement，处理元素节点

如果n2是一个元素节点，那么patch函数会调用processElement来处理它。

// packages/runtime-core/src/renderer.ts (简化版)
const processElement = (
  n1,
  n2,
  container,
  anchor,
  parentComponent,
  parentSuspense,
  isSVG,
  optimized
) => {
  if (!n1) {
    mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
  } else {
    patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized)
  }
}

processElement 会判断是否存在旧的VNode(n1)，如果不存在，说明是首次挂载，调用mountElement创建DOM元素，如果存在，则调用patchElement进行更新。

第七步：mountElement，创建元素节点

mountElement 函数负责创建 DOM 元素，设置属性，并递归地 patch 子节点。

// packages/runtime-core/src/renderer.ts (简化版)
const mountElement = (
  vnode,
  container,
  anchor,
  parentComponent,
  parentSuspense,
  isSVG,
  optimized
) => {
  const { type, props, shapeFlag, transition, dirs } = vnode
  const el = (vnode.el = hostCreateElement(type, isSVG, props)) // 创建DOM元素

  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) { // 处理文本子节点
    hostSetElementText(el, vnode.children)
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) { // 处理数组子节点
    mountChildren(vnode.children, el, anchor, parentComponent, parentSuspense, isSVG, optimized)
  }

  if (props) { // 设置属性
    for (const key in props) {
      if (key !== 'innerHTML' && key !== 'textContent') {
        hostPatchProp(
          el,
          key,
          null,
          props[key],
          isSVG,
          vnode.patchFlag,
          parentComponent,
          parentSuspense
        )
      }
    }
  }

  hostInsert(el, container, anchor) // 插入到DOM
}

mountElement 做了这些事情：

创建 DOM 元素 (hostCreateElement): hostCreateElement 函数负责创建 DOM 元素。它是一个平台相关的函数，在浏览器环境中，它会调用 document.createElement 或 document.createElementNS。
处理子节点: 如果 VNode 有子节点，则递归地调用 patch 函数来处理子节点。
设置属性 (hostPatchProp): hostPatchProp 函数负责设置 DOM 元素的属性。它也是一个平台相关的函数，在浏览器环境中，它会调用 setAttribute 或 setProperty。
插入到 DOM (hostInsert): hostInsert 函数负责将 DOM 元素插入到容器中。它也是一个平台相关的函数，在浏览器环境中，它会调用 appendChild 或 insertBefore。

第八步：processComponent，处理组件节点

如果n2是一个组件节点，那么patch函数会调用processComponent来处理它。

// packages/runtime-core/src/renderer.ts (简化版)
const processComponent = (
  n1,
  n2,
  container,
  anchor,
  parentComponent,
  parentSuspense,
  isSVG,
  optimized
) => {
  if (!n1) {
    mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
  } else {
    updateComponent(n1, n2, parentComponent, parentSuspense, isSVG, optimized)
  }
}

processComponent 会判断是否存在旧的VNode(n1)，如果不存在，说明是首次挂载，调用mountComponent进行挂载，如果存在，则调用updateComponent进行更新。注意，这里又回到了 mountComponent 函数，开始了组件的挂载流程（如果是首次挂载）。

第九步：updateComponent，更新组件节点

如果组件已经挂载过，那么 patch 函数会调用 updateComponent 函数来更新组件。

// packages/runtime-core/src/renderer.ts (简化版)
const updateComponent = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {
  const instance = (n2.component = n1.component) // 获取组件实例
  if (shouldUpdateComponent(n1, n2)) { // 判断是否需要更新
    instance.next = n2 // 更新VNode
    instance.update() // 触发更新
  } else {
    n2.el = n1.el
    instance.vnode = n2
  }
}

updateComponent 做了这些事情：

获取组件实例: 从旧的 VNode (n1) 中获取组件实例。
判断是否需要更新 (shouldUpdateComponent): shouldUpdateComponent 函数负责判断组件是否需要更新。它会比较新旧 VNode 之间的 props、children 等等，如果存在差异，则需要更新。
触发更新: 如果需要更新，则更新组件的 VNode，并触发组件的更新函数 (instance.update)。

流程总结

总的来说，组件的挂载流程可以概括为以下几个步骤：

步骤	函数	描述
1. 启动挂载	`app.mount()`	将组件挂载到指定的 DOM 容器中。
2. 组件挂载	`mountComponent()`	创建组件实例，初始化 props，调用 setup 函数，建立渲染副作用。
3. 建立渲染副作用	`setupRenderEffect()`	创建一个响应式的渲染循环，监听组件状态的变化，并在状态改变时重新渲染组件。
4. 渲染组件 VNode 树	`renderComponentRoot()`	执行组件的渲染函数，获取组件的 VNode 树。
5. 渲染 VNode 树到 DOM	`patch()`	将 VNode 树渲染到 DOM 上，并处理新旧 VNode 树之间的差异。
6. 处理元素节点	`processElement()`	创建 DOM 元素，设置属性，递归地 patch 子节点。
7. 创建元素节点	`mountElement()`	创建 DOM 元素，设置属性，并递归地 patch 子节点。
8. 处理组件节点	`processComponent()`	挂载或更新组件。
9. 更新组件节点	`updateComponent()`	如果组件已经挂载过，则更新组件。

结尾：理解源码，融会贯通

好了，各位观众老爷，咱们今天就讲到这里。希望通过今天的讲解，大家对Vue 3组件的挂载流程有了更深入的理解。记住，理解源码不是为了背诵代码，而是为了理解其背后的思想和原理，这样才能在实际开发中更加灵活地运用。下次再见！

发表回复 取消回复

发表回复取消回复