补丁标记（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" 那部分不动<li> <strong>4（STYLE）</strong>：仅 style 对象绑定变化，例如 <code>:style="{ color: textColor }" -
8（PROPS）：除 class/style 外的普通属性变动，比如
:id="dynamicId"或:disabled="isDisabled" - -1（HOISTED）：这个节点完全静态，被提前“拎”到 render 函数外缓存，运行时根本不会重新创建
怎么看懂编译后的代码里 PatchFlag？
打开浏览器开发者工具，在 Sources 或 Vue Devtools 的 compiled output 里找 createVNode 调用，第三个或第四个参数通常就是它：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
例：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 占用和重排重绘次数。
