Vue 3源码极客之：`Vue`的`Fragment`：如何通过`VNode`的`type`和`patchFlag`进行优化。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，早上好！今天咱们聊点Vue 3源码里的小秘密，关于Fragment的那些事儿。保证听完之后，你也能在简历上加上一句：“精通Vue 3源码，尤其是对Fragment的优化有着深入的理解”。

开场白：为啥需要Fragment？

想象一下，你写了个Vue组件，结构是这样的：

<template>
  <div>
    <h1>欢迎来到我的组件</h1>
    <p>这里有一些内容。</p>
  </div>
</template>

没毛病吧？但是，如果你的组件只是想返回一些元素，并不需要一个根元素包裹呢？就像这样：

<template>
  <h1>欢迎来到我的组件</h1>
  <p>这里有一些内容。</p>
</template>

在Vue 2里，这可是要报错的！Vue 2 强制要求组件必须有一个根元素。这就有点尴尬了，有时候我们真的不需要这个根元素啊！

这时候，Fragment就闪亮登场了！它允许组件返回多个根节点，而不需要额外的包裹元素。Vue 3完美支持了Fragment，妈妈再也不用担心我写奇怪的<div>了！

Fragment的本质：VNode的type

在Vue 3里，Fragment其实就是一个特殊的VNode（Virtual DOM Node）。这个VNode的type属性被设置为一个特定的值，表示它是一个Fragment。这个值是什么呢？来，上源码：

// packages/shared/src/shapeFlags.ts
export const enum ShapeFlags {
  // ... 其他 flags
  COMPONENT = 1 << 5, // 32
  COMPONENT_FUNCTIONAL = 1 << 6, // 64
  TEXT_CHILDREN = 1 << 7, // 128
  ARRAY_CHILDREN = 1 << 8, // 256
  SLOTS_CHILDREN = 1 << 9, // 512
  TELEPORT = 1 << 10, // 1024
  SUSPENSE = 1 << 11, // 2048
  // keep this the same so it can be used during patching as a sufficiently
  // stable key.
  // Fragment的type就是Symbol(Fragment)
  FRAGMENT = Symbol(undefined),
  PORTAL = Symbol(undefined)
}

看到了吗？Fragment的type是一个Symbol(undefined)。这意味着，当Vue在渲染VNode的时候，如果发现type是这个Symbol，它就知道这是一个Fragment，然后就会特殊处理。

Fragment的创建：createVNode函数

那么，Fragment的VNode是怎么创建出来的呢？答案是createVNode函数。这个函数是创建所有VNode的基础。

// packages/runtime-core/src/vnode.ts

export function createVNode(
  type: VNodeTypes | ClassComponent | FunctionComponent | string,
  props: Data | null = null,
  children: any = null,
  patchFlag: number = 0,
  dynamicProps: string[] | null = null,
  shapeFlag: number = isString(type)
    ? ShapeFlags.ELEMENT
    : isObject(type)
      ? ShapeFlags.STATEFUL_COMPONENT
      : 0
): VNode {
  // ...省略部分代码

  const vnode: VNode = {
    __v_isVNode: true,
    __v_skip: true,
    type,
    props,
    children,
    key: props && normalizeKey(props),
    shapeFlag,
    patchFlag,
    dynamicProps,
    appContext: null,
    dirs: null,
    transition: null,
    component: null,
    suspense: null,
    el: null,
    anchor: null,
    target: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag: shapeFlag,
    patchFlag: patchFlag || 0,
  }

  // ...省略部分代码

  return vnode
}

当我们创建一个Fragment的VNode时，我们需要将type设置为Fragment（也就是Symbol(undefined)），然后将子节点放在children属性里。

Fragment的渲染：patch函数

关键来了，Fragment的渲染逻辑在哪里呢？就在patch函数里！patch函数是Vue的核心渲染函数，它负责比较新旧VNode，然后更新DOM。

// packages/runtime-core/src/renderer.ts

const patch: PatchFn = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null = null,
  parentComponent: ComponentInternalInstance | null = null,
  parentSuspense: SuspenseBoundary | null = null,
  isSVG: boolean = false,
  optimized: boolean = false
) => {
  // ...省略部分代码

  const { type, shapeFlag } = n2
  switch (type) {
    // ...省略其他类型
    case Fragment:
      processFragment(
        n1,
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      )
      break
    // ...省略其他类型
  }

  // ...省略部分代码
}

可以看到，patch函数会根据VNode的type来决定如何处理。如果type是Fragment，那么就会调用processFragment函数。

processFragment函数：Fragment的灵魂

processFragment函数才是Fragment渲染的核心。它的作用就是遍历Fragment的子节点，然后将它们插入到DOM中。

// packages/runtime-core/src/renderer.ts

const processFragment = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  optimized: boolean
) => {
  const { children } = n2
  if (!n1) {
    mountChildren(
      children,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized
    )
  } else {
    patchChildren(
      n1,
      n2,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized
    )
  }
}

可以看到，processFragment函数会根据新旧VNode是否存在来决定调用mountChildren还是patchChildren。这两个函数都是用来处理子节点的。

mountChildren：用于初次渲染，它会遍历子节点，然后将它们插入到DOM中。
patchChildren：用于更新，它会比较新旧子节点，然后更新DOM。

patchFlag：性能优化的秘密武器

Fragment除了type之外，还有一个重要的属性：patchFlag。patchFlag是一个数字，它用来标记VNode的哪些部分发生了变化。通过patchFlag，Vue可以精确地更新DOM，避免不必要的渲染，从而提高性能。

patchFlag的取值有很多，比如：

`patchFlag` 值	含义
`TEXT`	文本节点发生了变化
`CLASS`	class 属性发生了变化
`STYLE`	style 属性发生了变化
`PROPS`	除了 class 和 style 之外的属性发生了变化
`FULL_PROPS`	带有 key 属性的节点，并且 key 发生了变化
`HYDRATE_EVENTS`	带有事件监听器的节点
`STABLE_FRAGMENT`	子节点顺序稳定的 fragment
`KEYED_FRAGMENT`	带有 key 的 fragment
`UNKEYED_FRAGMENT`	没有 key 的 fragment
`NEED_PATCH`	需要进行完整的 patch
`DYNAMIC_SLOTS`	动态 slots
`DEV_ROOT_FRAGMENT`	仅用于开发环境的 fragment

对于Fragment来说，比较重要的patchFlag是：

STABLE_FRAGMENT：表示Fragment的子节点顺序是稳定的，也就是说，子节点的位置不会发生变化。如果Fragment的patchFlag是STABLE_FRAGMENT，那么Vue就可以直接更新子节点的内容，而不需要重新排序。
KEYED_FRAGMENT：表示Fragment的子节点带有key属性。如果Fragment的patchFlag是KEYED_FRAGMENT，那么Vue就可以根据key来精确地更新子节点，避免不必要的渲染。
UNKEYED_FRAGMENT：表示Fragment的子节点没有key属性。如果Fragment的patchFlag是UNKEYED_FRAGMENT，那么Vue就需要比较新旧子节点的位置，然后更新DOM。

Fragment的优化策略

Vue 3 通过 type 和 patchFlag 对 Fragment 进行了优化，主要的策略有：

避免不必要的包裹元素：Fragment 允许组件返回多个根节点，避免了为了满足 Vue 2 的单根节点要求而添加不必要的包裹元素。
针对不同类型的 Fragment 进行优化：通过 patchFlag 标记 Fragment 的类型（STABLE_FRAGMENT、KEYED_FRAGMENT、UNKEYED_FRAGMENT），Vue 可以采取不同的更新策略，从而提高性能。
- STABLE_FRAGMENT：如果 Fragment 的子节点顺序稳定，Vue 可以直接更新子节点的内容，而不需要重新排序。这在很多情况下可以避免大量的 DOM 操作。
- KEYED_FRAGMENT：如果 Fragment 的子节点带有 key 属性，Vue 可以根据 key 来精确地更新子节点，避免不必要的渲染。这在列表渲染等场景下非常有用。
- UNKEYED_FRAGMENT：如果 Fragment 的子节点没有 key 属性，Vue 需要比较新旧子节点的位置，然后更新 DOM。这种情况下，Vue 的性能会相对较差，因此建议在可能的情况下为子节点添加 key 属性。
减少 DOM 操作：通过 patchFlag，Vue 可以精确地知道 VNode 的哪些部分发生了变化，从而避免不必要的 DOM 操作。例如，如果 Fragment 的 patchFlag 表明只有文本节点发生了变化，Vue 就只会更新文本节点的内容，而不会重新渲染整个 Fragment。

代码示例：STABLE_FRAGMENT

<template>
  <template v-if="show">
    <h1>标题</h1>
    <p>内容</p>
  </template>
</template>

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

export default {
  setup() {
    const show = ref(true);

    return {
      show,
    };
  },
};
</script>

在这个例子中，v-if 指令会创建一个 Fragment。由于子节点（<h1> 和 <p>）的顺序是稳定的，因此 Vue 会将 patchFlag 设置为 STABLE_FRAGMENT。当 show 的值发生变化时，Vue 只需要插入或删除这两个节点，而不需要重新排序。

总结：Fragment的威力

通过type和patchFlag，Vue 3 对Fragment进行了精细的优化，使得它不仅可以解决Vue 2中单根节点的限制，还可以提高渲染性能。理解了Fragment的原理，你就能更好地利用它来构建高性能的Vue应用。

记住，Fragment的本质就是一个特殊的VNode，它的type是Symbol(undefined)，它的patchFlag用来标记哪些部分发生了变化。掌握了这些，你就可以在Vue 3的世界里自由翱翔了！

今天的讲座就到这里，感谢大家的观看！下次有机会再跟大家聊聊Vue 3的其他小秘密。溜了溜了~

发表回复 取消回复

发表回复取消回复