Vue 3源码极客之：`VNode`的`patchFlags`：`Vue`如何利用位运算优化更新时的`diff`过程。

各位观众老爷们，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 源码里一个贼有意思的东西：VNode 的 patchFlags。这玩意儿听起来好像很高深，但其实是 Vue 3 性能优化的一个大招，它利用了位运算，让 Vue 在更新 DOM 的时候，能够更精准、更高效地进行 diff。

咱们都知道，Vue 是一个响应式框架，数据一变，视图就得跟着变。但是，每次数据更新都一股脑地把整个 DOM 树重新渲染一遍，那效率可就太低了。所以，Vue 就需要一个聪明的办法，只更新那些真正需要更新的部分，这就是 diff 算法的意义所在。

patchFlags 就像是给每个 VNode 贴上的标签，告诉 Vue 这个节点有哪些地方需要特别关注，哪些地方可以忽略不计。有了这些标签，Vue 在 diff 的时候就能有的放矢，大大减少不必要的 DOM 操作。

1. patchFlags 是个啥？

简单来说，patchFlags 就是一个数字，但这个数字的每一位都代表着不同的含义。Vue 3 使用了位运算，巧妙地将多个标志信息压缩到一个数字里。

咱们先来看看 Vue 3 源码里 patchFlags 的一些定义：

export const enum PatchFlags {
  TEXT = 1, // 动态文本节点
  CLASS = 1 << 1, // 动态 class
  STYLE = 1 << 2, // 动态 style
  PROPS = 1 << 3, // 动态属性，不包括 class 和 style
  FULL_PROPS = 1 << 4, // 带有 key 的 props，需要完整 diff
  HYDRATION_EVENT = 1 << 5, // 带有监听事件的节点
  STABLE_FRAGMENT = 1 << 6, // 子节点顺序不会改变的 fragment
  KEYED_FRAGMENT = 1 << 7, // 带有 key 的 fragment
  UNKEYED_FRAGMENT = 1 << 8, // 没有 key 的 fragment
  NEED_PATCH = 1 << 9, // 需要进行子节点 diff
  DYNAMIC_SLOTS = 1 << 10, // 动态 slot
  DEV_ROOT_FRAGMENT = 1 << 11, // 仅供开发使用的 fragment
  HOISTED = -1, // 静态节点
  BAIL = -2 // 优化 bail out
}

看到没？每个标志都是 1 左移不同的位数，这样就保证了每个标志的值都是 2 的幂，从而可以用位运算进行组合和判断。

为了方便理解，咱们用表格来整理一下：

PatchFlag	值	含义
TEXT	1	动态文本节点
CLASS	2	动态 class
STYLE	4	动态 style
PROPS	8	动态属性，不包括 class 和 style
FULL_PROPS	16	带有 key 的 props，需要完整 diff
HYDRATION_EVENT	32	带有监听事件的节点
STABLE_FRAGMENT	64	子节点顺序不会改变的 fragment
KEYED_FRAGMENT	128	带有 key 的 fragment
UNKEYED_FRAGMENT	256	没有 key 的 fragment
NEED_PATCH	512	需要进行子节点 diff
DYNAMIC_SLOTS	1024	动态 slot
DEV_ROOT_FRAGMENT	2048	仅供开发使用的 fragment
HOISTED	-1	静态节点
BAIL	-2	优化 bail out (放弃优化，进行完整 diff)

2. 位运算的骚操作

位运算是计算机里一种非常高效的运算方式，直接对二进制位进行操作。在 patchFlags 中，主要用到了以下几种位运算：

• 按位或 (|)：用于组合多个标志。
• 按位与 (&)：用于判断是否包含某个标志。

举个例子，如果一个 VNode 既有动态的 class，又有动态的 style，那么它的 patchFlags 就可以这样计算：

const patchFlags = PatchFlags.CLASS | PatchFlags.STYLE; // 2 | 4 = 6

这样，patchFlags 的值就是 6，它的二进制表示是 0110。

然后，在 diff 的时候，如果需要判断这个 VNode 是否有动态的 `class，就可以这样判断：

if (patchFlags & PatchFlags.CLASS) {
  // 说明有动态 class，需要进行 diff
  console.log("需要更新 class");
}

patchFlags & PatchFlags.CLASS 相当于 0110 & 0010 = 0010，结果不为 0，说明 patchFlags 包含了 PatchFlags.CLASS 这个标志。

3. patchFlags 在 diff 中的应用

有了 patchFlags，Vue 在 diff 的时候就能更加精准地判断哪些地方需要更新。咱们来看一个简单的例子：

<template>
  <div :class="dynamicClass" :style="dynamicStyle">
    {{ dynamicText }}
  </div>
</template>

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

export default {
  setup() {
    const dynamicClass = ref('initial-class');
    const dynamicStyle = ref({ color: 'red' });
    const dynamicText = ref('initial text');

    setTimeout(() => {
      dynamicClass.value = 'updated-class';
      dynamicStyle.value = { color: 'blue' };
      dynamicText.value = 'updated text';
    }, 1000);

    return {
      dynamicClass,
      dynamicStyle,
      dynamicText,
    };
  },
};
</script>

在这个例子中，div 的 class、style 和文本内容都是动态的。在编译这个组件的时候，Vue 会为这个 div 创建一个 VNode，并设置相应的 patchFlags：

• class 是动态的，所以 patchFlags 包含 PatchFlags.CLASS。
• style 是动态的，所以 patchFlags 包含 PatchFlags.STYLE。
• 文本内容是动态的，所以 patchFlags 包含 PatchFlags.TEXT。

最终，这个 div 的 patchFlags 可能是 PatchFlags.CLASS | PatchFlags.STYLE | PatchFlags.TEXT，也就是 2 | 4 | 1 = 7。

当数据更新的时候，Vue 在 patch 这个 VNode 的时候，会先检查它的 patchFlags：

• 如果 patchFlags & PatchFlags.CLASS 为真，说明 class 需要更新，就更新 class。
• 如果 patchFlags & PatchFlags.STYLE 为真，说明 style 需要更新，就更新 style。
• 如果 patchFlags & PatchFlags.TEXT 为真，说明文本内容需要更新，就更新文本内容。

这样，Vue 就只更新了那些真正需要更新的部分，避免了不必要的 DOM 操作。

4. fragment 和 patchFlags

fragment 是一种特殊的 VNode，它可以包含多个子节点，而不需要一个根元素。fragment 在 Vue 3 中被广泛使用，尤其是在使用 v-for 的时候。

fragment 的 patchFlags 也有一些特殊的标志，比如：

• STABLE_FRAGMENT：表示子节点的顺序不会改变，Vue 可以直接复用之前的 DOM 节点。
• KEYED_FRAGMENT：表示子节点带有 key，Vue 可以根据 key 来进行更精确的 diff。
• UNKEYED_FRAGMENT：表示子节点没有 key，Vue 只能按照顺序进行 diff。

有了这些标志，Vue 在 diff fragment 的时候，就可以根据不同的情况采取不同的策略，进一步提高性能。

例如，如果一个 fragment 的 patchFlags 是 STABLE_FRAGMENT，那么 Vue 就可以直接跳过对这个 fragment 的 diff，因为它知道子节点的顺序不会改变。

5. HOISTED 和 BAIL

除了上面提到的那些标志，patchFlags 还有两个特殊的值：

• HOISTED：表示这是一个静态节点，Vue 会将它提升到更高的作用域，避免每次渲染都重新创建。
• BAIL：表示优化 bail out，也就是放弃优化，进行完整 diff。这种情况通常发生在一些特殊的情况下，比如使用了 v-once 指令，或者遇到了无法优化的动态节点。

HOISTED 很好理解，就是把静态节点缓存起来，避免重复创建。

BAIL 稍微复杂一点，它表示 Vue 遇到了一些无法优化的场景，只能放弃优化，进行完整的 diff。虽然这样会牺牲一些性能，但可以保证渲染的正确性。

6. 实际代码示例：patch 函数简化版

为了更深入地理解 patchFlags 的作用，咱们来看一个简化版的 patch 函数：

function patch(n1, n2, container) {
  const { type, shapeFlag, patchFlags } = n2;

  switch (type) {
    case Text:
      // 处理文本节点
      processText(n1, n2, container);
      break;
    case Element:
      // 处理元素节点
      processElement(n1, n2, container);
      break;
    // 其他类型的节点...
  }
}

function processElement(n1, n2, container) {
  if (!n1) {
    // 挂载新的元素
    mountElement(n2, container);
  } else {
    // 更新已存在的元素
    patchElement(n1, n2);
  }
}

function patchElement(n1, n2) {
  const el = n2.el = n1.el; // 获取真实 DOM 节点

  const oldProps = n1.props || {};
  const newProps = n2.props || {};

  // 根据 patchFlags 进行优化
  if (n2.patchFlags) {
    if (n2.patchFlags & PatchFlags.CLASS) {
      // 更新 class
      patchClass(el, oldProps, newProps);
    }

    if (n2.patchFlags & PatchFlags.STYLE) {
      // 更新 style
      patchStyle(el, oldProps, newProps);
    }

    if (n2.patchFlags & PatchFlags.PROPS) {
      // 更新其他属性
      patchProps(el, oldProps, newProps, n2.dynamicProps);
    }
  } else {
    // 没有 patchFlags，进行完整 diff
    patchProps(el, oldProps, newProps);
  }

  // 处理子节点
  patchChildren(n1, n2, el);
}

在这个简化版的 patch 函数中，可以看到 Vue 会先检查 VNode 的 patchFlags，然后根据不同的标志来决定如何更新这个节点。

如果 patchFlags 包含了 PatchFlags.CLASS，那么 Vue 就会调用 patchClass 函数来更新 class。如果 patchFlags 包含了 PatchFlags.STYLE，那么 Vue 就会调用 patchStyle 函数来更新 style。

如果没有 patchFlags，那么 Vue 就会进行完整的 diff，更新所有的属性。

7. dynamicProps 的作用

在上面的代码中，还有一个 dynamicProps 属性，它是一个数组，包含了所有动态属性的名称。这个属性的作用是，在更新属性的时候，Vue 只需要遍历 dynamicProps 数组，更新那些动态的属性，而不需要遍历所有的属性。

这进一步提高了更新的效率。

8. 总结

patchFlags 是 Vue 3 性能优化的一个重要手段，它利用位运算，将多个标志信息压缩到一个数字里，让 Vue 在 diff 的时候能够更精准、更高效地进行 DOM 操作。

通过使用 patchFlags，Vue 可以：

• 避免不必要的 DOM 操作。
• 根据不同的情况采取不同的策略，提高 diff 的效率。
• 缓存静态节点，避免重复创建。

总而言之，patchFlags 就像是 Vue 的一双慧眼，让它能够看清楚哪些地方需要更新，哪些地方可以忽略，从而实现更高效的渲染。

9. 思考题

1. 为什么 Vue 3 要使用位运算来实现 patchFlags？这样做有什么好处？
2. KEYED_FRAGMENT 和 UNKEYED_FRAGMENT 有什么区别？它们分别适用于什么场景？
3. BAIL 标志表示什么意思？什么情况下 Vue 会使用 BAIL 标志？

希望今天的分享对大家有所帮助！下次有机会再跟大家聊聊 Vue 3 源码的其他有趣的东西。谢谢大家！