Vue 3源码深度解析之：`Fragment`：如何渲染多个根节点，以及它的底层实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3源码里一个挺有趣的东西：Fragment。这玩意儿啊，简单来说，就是让你的Vue组件可以返回多个根节点，而不用再套个div了。是不是听起来就很爽？

一、告别div地狱：Fragment的诞生

在Vue 2时代，组件的template里必须有一个唯一的根节点。这意味着，如果你想返回多个元素，就必须用一个div或者其他标签把它们包裹起来。

// Vue 2时代的痛苦
<template>
  <div>
    <h1>标题一</h1>
    <p>段落一</p>
    <p>段落二</p>
  </div>
</template>

虽然这在大多数情况下没啥问题，但是如果你真的很讨厌多余的div，或者它破坏了你的CSS布局，那就很让人难受了。而且，多一层DOM节点，性能也会稍微受到一点影响（虽然很小，但积少成多嘛）。

为了解决这个问题，Vue 3引入了Fragment。Fragment允许组件返回多个根节点，而不需要额外的包裹元素。

// Vue 3的快乐
<template>
  <h1>标题一</h1>
  <p>段落一</p>
  <p>段落二</p>
</template>

是不是清爽多了？

二、 Fragment的使用方法：其实很简单

在Vue 3中，使用Fragment非常简单。你只需要直接返回多个根节点即可，Vue 3会自动将它们包裹在一个Fragment里。

除了在template中使用外，你还可以在render函数中使用Fragment。

import { h, Fragment } from 'vue';

export default {
  render() {
    return h(Fragment, [
      h('h1', '标题一'),
      h('p', '段落一'),
      h('p', '段落二')
    ]);
  }
};

这里，我们使用h函数创建了一个Fragment，并将需要渲染的元素作为子节点传递给它。

三、 Fragment的底层实现：窥探源码

那么，Fragment的底层是如何实现的呢？让我们一起深入Vue 3的源码，一探究竟。

首先，我们需要找到Fragment的定义。在Vue 3的packages/runtime-core/src/vnode.ts文件中，你可以找到以下代码：

export const Fragment = Symbol(__DEV__ ? 'Fragment' : undefined)

这里，Fragment实际上是一个Symbol。Symbol是一种原始数据类型，它表示一个唯一的标识符。使用Symbol作为Fragment的标识符，可以确保它不会与其他VNode类型冲突。

接下来，我们需要看看Vue是如何处理Fragment的。在packages/runtime-core/src/renderer.ts文件中，你可以找到patch函数，它是负责更新VNode的核心函数。

在patch函数中，Vue会根据VNode的类型来执行不同的操作。当VNode的类型是Fragment时，Vue会遍历Fragment的子节点，并将它们逐个渲染到DOM中。

// 简化后的patch函数
const patch: PatchFn = (
  n1: VNode | null, // old VNode
  n2: VNode,       // new VNode
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null = null,
  parentSuspense: SuspenseBoundary | null = null,
  isSVG: boolean = false,
  optimized: boolean = false,
  internals: RendererInternals<RendererNode, RendererElement>,
  scopeId: string | null = null
) => {
  const { type, shapeFlag } = n2
  switch (type) {
    case Fragment:
      processFragment(
        n1,
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized,
        internals,
        scopeId
      )
      break;
    // ...其他类型的VNode处理
  }
}

可以看到，当 type 为 Fragment 的时候，进入了 processFragment 函数。我们来看看 processFragment 的源码（同样在 packages/runtime-core/src/renderer.ts）：

const processFragment = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null = null,
  parentSuspense: SuspenseBoundary | null = null,
  isSVG: boolean = false,
  optimized: boolean = false,
  internals: RendererInternals<RendererNode, RendererElement>,
  scopeId: string | null = null
) => {
  const { patch, createText } = internals

  const { children: c2, patchFlag } = n2
  if (n1 == null) {
    // 如果是新的Fragment，直接挂载它的子节点
    for (let i = 0; i < c2.length; i++) {
      const child = (c2[i] as VNode)
      patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals, scopeId)
    }
  } else {
    // 如果是更新Fragment，diff它的子节点
    const { children: c1 } = n1
    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals, scopeId)
  }
}

这段代码的关键在于，它直接遍历Fragment的子节点，并调用patch函数来处理每个子节点。这意味着，Fragment本身不会创建任何DOM元素，它只是一个虚拟的容器，用于组织子节点。

如果是新的 Fragment，那么就循环它的子节点，然后递归调用 patch 函数，将每一个子节点都挂载到容器中。如果是更新 Fragment，那么就调用 patchKeyedChildren 函数来 diff 新旧子节点，然后进行更新。

总结一下：

Fragment是一个Symbol，用于标识VNode的类型。
Fragment本身不会创建任何DOM元素。
在patch函数中，Vue会遍历Fragment的子节点，并将它们逐个渲染到DOM中。

四、 Fragment的优势与局限

优势：

减少DOM层级： 避免了不必要的div包裹，减少了DOM层级，提高了性能。
更清晰的模板结构： 使模板结构更加清晰，易于阅读和维护。
避免CSS布局问题： 避免了因为多余的div而导致的CSS布局问题。

局限：

不能直接添加属性： 因为Fragment本身不是一个真实的DOM元素，所以不能直接给它添加属性，例如class、style等。如果你需要给Fragment添加属性，可以将属性添加到它的子节点上。
与过渡效果的冲突： 在某些情况下，Fragment可能会与Vue的过渡效果产生冲突。这是因为Vue的过渡效果通常是基于单个DOM元素的。如果Fragment包含了多个根节点，过渡效果可能会失效。

五、 Fragment的应用场景

表格布局： 在表格布局中，可以使用Fragment来避免多余的div包裹tr、td等元素。
列表渲染： 在列表渲染中，可以使用Fragment来避免多余的div包裹列表项。
自定义组件： 在自定义组件中，可以使用Fragment来返回多个根节点，使组件更加灵活。

六、代码示例：使用Fragment优化表格布局

假设我们有一个表格组件，需要渲染一个包含标题和数据的表格。

// 不使用Fragment的表格组件
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>20</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>22</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

可以看到，我们使用了一个div来包裹整个表格。现在，我们使用Fragment来优化这个组件。

// 使用Fragment的表格组件
<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>22</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</template>

我们直接返回了table元素，而没有使用额外的div包裹。这样，就减少了DOM层级，提高了性能。

七、总结：Fragment，让你的Vue组件更简洁

Fragment是Vue 3中一个非常实用的特性，它可以让你避免不必要的div包裹，使你的Vue组件更加简洁、高效。虽然它有一些局限性，但是只要你了解它的原理和使用方法，就可以在合适的场景下充分利用它的优势。

八、补充：Vue 3 中的其他 VNode 类型

除了 Fragment 之外，Vue 3 中还有其他一些特殊的 VNode 类型，了解它们可以帮助你更好地理解 Vue 3 的渲染机制。

VNode 类型	描述
`Text`	文本节点，用于渲染纯文本内容。
`Comment`	注释节点，用于渲染注释内容。
`Static`	静态节点，用于渲染静态HTML内容。静态节点在渲染过程中不会被更新，可以提高渲染性能。
`Element`	元素节点，用于渲染HTML元素。
`Component`	组件节点，用于渲染Vue组件。
`Teleport`	传送门节点，用于将组件的内容渲染到DOM树的另一个位置。
`Suspense`	异步依赖处理组件，用于处理异步组件的加载状态。
`KeepAlive`	缓存组件，用于缓存组件的状态，避免组件在切换时被销毁和重新创建。
`Block`	块节点，Vue 3 编译器的优化产物，通过将模板划分为多个静态区域和动态区域，可以减少不必要的更新。

这些 VNode 类型在 Vue 3 的渲染过程中扮演着不同的角色，共同协作完成页面的渲染。深入理解这些 VNode 类型可以帮助你更好地理解 Vue 3 的渲染机制，从而编写出更高效、更健壮的 Vue 应用。

好了，今天的分享就到这里。希望大家有所收获！如果有什么疑问，欢迎随时提问。咱们下次再见！

发表回复 取消回复

发表回复取消回复