补丁标记 PatchFlag 是什么？Vue 优化代码解析

补丁标记（PatchFlag）是 Vue 3 编译器在生成 VNode 时自动注入的数字标识，用于运行时精准识别并仅更新动态部分；它通过位运算组合标志（如 TEXT=1、CLASS=2），配合按位与判断，跳过静态内容，显著提升 diff 性能。

补丁标记（PatchFlag）是 Vue 3 编译器在生成虚拟节点（VNode）时自动添加的数字标识，用来告诉运行时“这个节点哪些部分会变”。它不是你手写的代码，而是编译阶段悄悄塞进 createVNode 调用里的一个整数，目的很实在：跳过静态内容，只比对真正可能更新的地方。

PatchFlag 是怎么工作的？

Vue 2 的 diff 是“全量扫一遍”，哪怕只有文本变了，也要检查 class、style、子节点……Vue 3 换了思路：编译时就分析模板，把动态部分记下来，运行时按图索骥。

• 编译器读到 {{ msg }}，就知道文本会变 → 打上 TEXT（值为 1）
• 看到 :class="isActive"，知道 class 会变 → 加上 CLASS（值为 2）
• 如果同时有文本和 class 变化，最终 patchFlag 就是 1 | 2 = 3（位或运算）
• 运行时拿到 VNode，检查 vnode.patchFlag & PatchFlags.TEXT，为真才去更新文本，其他一律跳过

常见 PatchFlag 值对应什么变化？

你不需要背全部，但下面这几个高频值看编译输出时几乎天天见：

• 1（TEXT）：仅插值文本变动，比如 <span>Hello {{ name }}</span>
• 2（CLASS）：只有 class 绑定是响应式的，如 <div :class="cls">，而 class="static" 那部分不动
• 4（STYLE）：仅 style 对象绑定变化，例如 :style="{ color: textColor }"
• 8（PROPS）：除 class/style 外的普通属性变动，比如 :id="dynamicId" 或 :disabled="isDisabled"
• -1（HOISTED）：这个节点完全静态，被提前“拎”到 render 函数外缓存，运行时根本不会重新创建

怎么看懂编译后的代码里 PatchFlag？

打开浏览器开发者工具，在 Sources 或 Vue Devtools 的 compiled output 里找 createVNode 调用，第三个或第四个参数通常就是它：