深入分析 Vue 3 渲染器中 `renderer.mountComponent` 和 `renderer.patch` 的完整执行流程，它们如何协同完成组件的首次渲染和更新？

各位观众老爷，大家好！我是今天的主讲人，咱们今天来聊聊 Vue 3 渲染器的两大台柱子：mountComponent 和 patch。这俩家伙可是 Vue 3 渲染过程的核心，搞清楚它们怎么配合，能让你对 Vue 3 的运作机制有个更清晰的认识。

咱们先来设定个场景，想象一下你正在开发一个 Vue 应用，页面上有一个简单的组件，比如一个显示用户信息的 UserProfile 组件。那么，Vue 3 是如何把这个组件变成实际的 DOM 元素的呢？这就是 mountComponent 和 patch 的舞台了。

一、mountComponent：组件的首次登场

mountComponent 的主要职责是首次渲染一个组件。也就是说，当一个组件第一次出现在页面上时，mountComponent 负责把它初始化并转换为 DOM 元素。

创建组件实例 (Component Instance)

首先，mountComponent 会创建一个组件实例。这个实例包含了组件的状态、props、方法等等。可以把它想象成组件的一个“大脑”。

function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
  const instance = (initialVNode.component = createComponentInstance(
    initialVNode,
    parentComponent,
    parentSuspense
  ))

  // ... 后面还有很多操作
}

function createComponentInstance(vnode, parentComponent, parentSuspense) {
  const type = vnode.type //组件的选项对象

  const instance = {
    uid: uid++,
    vnode,
    type,
    appContext: parentComponent ? parentComponent.appContext : vnode.appContext || emptyApp,
    props: {},
    attrs: {},
    slots: {},
    ctx: {},
    data: {},
    setupState: {},
    provides: parentComponent ? parentComponent.provides : Object.create(null),
    parent: parentComponent,
    // ... 还有很多属性，这里省略
  }

  instance.ctx = { _: instance } //ctx 上下文代理对象
  return instance
}

这里，createComponentInstance 创建了一个包含各种属性的 instance 对象，比如 props、data、slots 等。这些属性将在后续的渲染过程中被用到。

设置组件实例 (Setup Component)

接下来，mountComponent 会调用 setupComponent 函数来初始化组件实例。 setupComponent 会处理 props、attrs、slots 等数据，并且执行组件的 setup 函数 (如果存在的话)。

function setupComponent(instance) {
  const { type: Component, vnode } = instance

  const { props: propsOptions, children } = vnode
  // 处理 props
  initProps(instance, propsOptions)
  // 处理 slots
  initSlots(instance, children)

  // 执行 setup 函数
  const setupResult = Component.setup
    ? callWithErrorHandling(
        Component.setup,
        instance,
        SetupRenderEffectErrorCode.SETUP_FUNCTION,
        [instance.props, instance.ctx]
      )
    : undefined

  handleSetupResult(instance, setupResult)
}

function handleSetupResult(instance, setupResult) {
    if (isFunction(setupResult)) {
        // setup 返回 render 函数
        instance.render = setupResult
    } else if (isObject(setupResult)) {
        // setup 返回对象
        instance.setupState = proxyRefs(setupResult)
    }
    finishComponentSetup(instance)
}

setupComponent 的作用至关重要，它为组件准备好了所需的数据和函数，为后续的渲染做好了铺垫。如果组件有 setup 函数，setupComponent 会执行它，并处理其返回值。如果 setup 函数返回一个函数，那么这个函数会被作为组件的 render 函数；如果 setup 函数返回一个对象，那么这个对象会被合并到组件的 setupState 中。

创建渲染上下文 (Render Context)

在执行 setup 函数之后，mountComponent 会创建一个渲染上下文。这个上下文包含了组件实例、props、slots 等信息，并会被传递给组件的 render 函数。
```
function finishComponentSetup(instance) {
  if (!instance.render) {
    // 如果没有 render 函数，则从 template 编译而来
    if (!instance.template && instance.type.template) {
      instance.template = instance.type.template
    }
    instance.render = compile(instance.template)
  }
}
```
如果组件没有显式地定义 render 函数，Vue 3 会尝试从 template 选项中编译出一个 render 函数。这样，即使你只写了模板，Vue 也能把它渲染成 DOM 元素。

执行 render 函数 (Execute Render Function)

终于到了关键的一步：执行 render 函数。 render 函数会返回一个 VNode (Virtual DOM 节点)，描述了组件应该如何渲染。

function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
    // ... 前面的步骤
    const componentUpdateFn = () => {
        if (!instance.isMounted) {
            // 首次渲染
            const { bm, m, parent } = instance
            // 执行 beforeMount 钩子
            if (bm) {
                invokeArrayFns(bm)
            }

            const subTree = (instance.subTree = renderComponentRoot(instance)) // 执行render函数，生成VNode
            // ... 后续操作
        }
    }
    componentUpdateFn()
}

function renderComponentRoot(instance) {
  return callWithErrorHandling(
    instance.render,
    instance,
    RenderEffectErrorCode.RENDER_FUNCTION,
    [instance.proxy /* renderContext */]
  )
}

renderComponentRoot 函数会调用组件的 render 函数，并传入渲染上下文。 render 函数会返回一个 VNode，描述了组件应该如何渲染。这个 VNode 就是 Virtual DOM 的核心，它是一个轻量级的 JavaScript 对象，描述了 DOM 树的结构。

调用 patch 函数 (Call Patch Function)

mountComponent 的最后一步是调用 patch 函数，将 VNode 渲染成实际的 DOM 元素，并插入到页面中。

function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
    // ... 前面的步骤
    const componentUpdateFn = () => {
        if (!instance.isMounted) {
            // 首次渲染
            const { bm, m, parent } = instance
            // 执行 beforeMount 钩子
            if (bm) {
                invokeArrayFns(bm)
            }

            const subTree = (instance.subTree = renderComponentRoot(instance)) // 执行render函数，生成VNode
            // 调用 patch 函数，将 VNode 渲染成 DOM 元素
            patch(
                null, // n1 为 null，表示首次渲染
                subTree,
                container,
                anchor,
                instance,
                parentSuspense,
                isSVG,
                optimized
            )
            // ... 后续操作
        }
    }
    componentUpdateFn()
}

这里，patch 函数的第一个参数是 null，表示这是一个首次渲染。 patch 函数会将 VNode 转换为 DOM 元素，并插入到 container 中。

至此，mountComponent 完成了它的使命：将组件的 VNode 渲染成实际的 DOM 元素，并插入到页面中。组件也完成了它的首次登场。

二、patch：DOM 的更新与演变

patch 函数是 Vue 3 渲染器的核心，它负责比较新旧 VNode，并更新 DOM 元素。也就是说，当组件的状态发生变化时，patch 函数会找出需要更新的 DOM 节点，并进行相应的操作。

patch 函数的逻辑比较复杂，但是可以概括为以下几个步骤：

判断 VNode 类型 (Check VNode Type)

首先，patch 函数会判断 VNode 的类型。根据 VNode 类型的不同，patch 函数会采取不同的处理方式。

function 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:
      // 处理静态节点
      break
    case Fragment:
      // 处理 Fragment 节点
      processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      break
    default:
      if (shapeFlag & ShapeFlags.ELEMENT) {
        // 处理 Element 节点
        processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (shapeFlag & ShapeFlags.COMPONENT) {
        // 处理 Component 节点
        processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
          // 处理 Teleport 节点
          processTeleport(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      } else if (shapeFlag & ShapeFlags.SUSPENSE) {
          // 处理 Suspense 节点
          processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      }
  }
}

这里，shapeFlag 是一个位掩码，用于表示 VNode 的类型。 Vue 3 使用位掩码来提高性能，因为位运算比字符串比较更快。

处理 Element 节点 (Process Element Node)

如果 VNode 是一个 Element 节点，patch 函数会调用 processElement 函数来处理。 processElement 函数会比较新旧 VNode 的属性、子节点等，并更新 DOM 元素。
```
function 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 函数会根据 n1 是否存在来判断是首次渲染还是更新。如果 n1 不存在，表示是首次渲染，processElement 函数会调用 mountElement 函数来创建 DOM 元素。如果 n1 存在，表示是更新，processElement 函数会调用 patchElement 函数来比较新旧 VNode，并更新 DOM 元素。
处理 Component 节点 (Process Component Node)

如果 VNode 是一个 Component 节点，patch 函数会调用 processComponent 函数来处理。 processComponent 函数会比较新旧 VNode 的 props、slots 等，并更新组件实例。
```
function 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 函数也会根据 n1 是否存在来判断是首次渲染还是更新。如果 n1 不存在，表示是首次渲染，processComponent 函数会调用 mountComponent 函数来创建组件实例。如果 n1 存在，表示是更新，processComponent 函数会调用 updateComponent 函数来比较新旧 VNode，并更新组件实例。

更新 DOM 属性 (Update DOM Attributes)

patchElement 函数会比较新旧 VNode 的属性，并更新 DOM 元素的属性。

function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {
  const el = (n2.el = n1.el) // 获取旧的 DOM 元素
  const oldProps = n1.props || EMPTY_OBJ
  const newProps = n2.props || EMPTY_OBJ

  patchProps(el, newProps, oldProps, parentComponent, parentSuspense, isSVG) //比较和更新属性
  patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG, optimized) //比较和更新子节点
}

function patchProps(el, newProps, oldProps, parentComponent, parentSuspense, isSVG) {
  // ... 比较和更新属性的逻辑
}

patchProps 函数会比较新旧 VNode 的属性，如果属性值发生了变化，patchProps 函数会更新 DOM 元素的属性。例如，如果组件的 class 属性发生了变化，patchProps 函数会更新 DOM 元素的 class 属性。

更新子节点 (Update Children)

patchElement 函数还会比较新旧 VNode 的子节点，并更新 DOM 元素的子节点。
```
function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {
  const el = (n2.el = n1.el) // 获取旧的 DOM 元素
  const oldProps = n1.props || EMPTY_OBJ
  const newProps = n2.props || EMPTY_OBJ

  patchProps(el, newProps, oldProps, parentComponent, parentSuspense, isSVG) //比较和更新属性
  patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG, optimized) //比较和更新子节点
}
```
patchChildren 函数会比较新旧 VNode 的子节点，如果子节点发生了变化，patchChildren 函数会更新 DOM 元素的子节点。 Vue 3 使用了很多优化策略来提高 patchChildren 函数的性能，例如：
- Keyed Diffing: 如果子节点都有唯一的 key 属性，Vue 3 会使用 key 属性来比较新旧子节点，从而减少 DOM 操作。
- 双端 Diffing: Vue 3 使用双端 Diffing 算法来比较新旧子节点，可以更有效地处理子节点的变化。

三、mountComponent 和 patch 的协同作战

现在，我们已经了解了 mountComponent 和 patch 函数的职责。那么，它们是如何协同作战，完成组件的首次渲染和更新的呢？

可以用下表来概括：

操作	首次渲染 (Mount)	更新 (Patch)
入口函数	`mountComponent`	`patch`
主要职责	创建组件实例，执行 `render` 函数，生成 VNode，渲染 DOM	比较新旧 VNode，更新 DOM 元素
VNode 参数	新 VNode	新旧 VNode
DOM 操作	创建新的 DOM 元素，插入到页面中	更新现有的 DOM 元素，例如更新属性、更新子节点等
核心流程	1. 创建组件实例	1. 判断 VNode 类型
	2. 执行 `setup` 函数	2. 根据 VNode 类型进行处理 (Element, Component, Text 等)
	3. 执行 `render` 函数	3. 比较新旧 VNode 的属性和子节点
	4. 调用 `patch` 函数	4. 更新 DOM 元素
目标	将组件的 VNode 渲染成实际的 DOM 元素	使 DOM 元素与最新的 VNode 保持同步

简单来说，mountComponent 负责把组件从无到有地渲染出来，而 patch 负责在组件状态发生变化时，更新 DOM 元素，保持页面与组件的状态同步。 mountComponent 就像一个建筑师，负责设计和建造房子； patch 就像一个装修工，负责维护和更新房子。

四、一个简单的例子

为了更好地理解 mountComponent 和 patch 的工作流程，我们来看一个简单的例子。假设我们有以下 Vue 组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');

    const updateMessage = () => {
      message.value = 'Hello, Updated Vue!';
    };

    return {
      message,
      updateMessage
    };
  }
};
</script>

首次渲染 (Mount)

当组件第一次渲染时，mountComponent 会被调用。 mountComponent 会创建组件实例，执行 setup 函数，生成 VNode，然后调用 patch 函数将 VNode 渲染成 DOM 元素。
- mountComponent 创建组件实例，并将 message 和 updateMessage 添加到组件实例中。
- setup 函数返回一个包含 message 和 updateMessage 的对象，Vue 会将它们代理到组件实例上。
- render 函数会返回一个 VNode，描述了组件应该如何渲染。
- patch 函数会将 VNode 转换为 DOM 元素，并插入到页面中。
更新 (Patch)

当点击 "Update Message" 按钮时，updateMessage 函数会被调用，message.value 的值会发生变化。由于 message 是一个 ref 对象，Vue 会自动检测到 message 的变化，并触发组件的更新。
- 当 message.value 发生变化时，Vue 会创建一个新的 VNode，描述了组件应该如何渲染。
- patch 函数会被调用，比较新旧 VNode，找出需要更新的 DOM 节点。
- patch 函数会更新 <h1> 元素的文本内容，使其显示 "Hello, Updated Vue!"。

通过这个例子，我们可以看到 mountComponent 和 patch 如何协同作战，完成组件的首次渲染和更新。

五、总结

mountComponent 和 patch 是 Vue 3 渲染器的两大台柱子，它们负责组件的首次渲染和更新。 mountComponent 负责把组件从无到有地渲染出来，而 patch 负责在组件状态发生变化时，更新 DOM 元素，保持页面与组件的状态同步。理解 mountComponent 和 patch 的工作流程，可以帮助你更好地理解 Vue 3 的运作机制，并编写更高效的 Vue 应用。

希望今天的讲座能帮助大家更好地理解 Vue 3 渲染器的核心原理。感谢大家的收听！如果大家还有什么问题，欢迎随时提问。下次再见！

发表回复 取消回复

发表回复取消回复