什么是补丁标记 PatchFlag？教你如何看懂 Vue 编译后的优化代码-Vue.js-PHP中文网

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

什么是补丁标记 patchflag？教你如何看懂 vue 编译后的优化代码

补丁标记（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）：仅插值文本变动，比如 Hello {{ name }}
2（CLASS）：只有 class 绑定是响应式的，如 ，而 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 调用，第三个或第四个参数通常就是它：

											
												
												
													Vue Wrap
													Vue 入门指南 — JavaScript 框架
												
												下载
												
											
										
例：
createVNode("div", { class: ["btn", cls] }, "Click me", 2 /* CLASS */)
createVNode("p", null, toDisplayString(msg), 1 /* TEXT */)
createVNode("div", { id: "main", class: staticClass }, null, -1 /* HOISTED */)
注意：数值后面跟着的注释（如 /* CLASS */）是编译器自动生成的，专为人类可读；运行时只认数字。
为什么它对性能很重要？
没有 PatchFlag，每次响应式数据更新，Vue 都得从根节点开始逐层对比所有属性和子节点。有了它，更新就像查快递单号——只盯住标记了“待更新”的字段，其余部分连看都不看。
尤其在列表渲染、表单联动、实时仪表盘这类高频更新场景，这种“靶向更新”能明显减少 CPU 占用和重排重绘次数。