PatchFlags 是 Vue 3 编译器在编译阶段为动态 VNode 打上的位掩码数字标记，用于运行时精准识别需更新的属性类型（如 TEXT=1、CLASS=2），跳过静态部分，避免全量 diff，显著提升渲染性能。
PatchFlags 是 Vue 3 编译器在模板编译阶段自动打在虚拟节点（VNode）上的数字标记，用来告诉运行时：“这个节点哪些部分是动态的，更新时只需检查这里，其余全跳过”。它不是运行时推断出来的，而是在代码生成时就写死在 createVNode 调用里的整数，本质是一个位掩码（bitmask），靠二进制每一位代表一种更新类型。
PatchFlags 怎么来的？编译器一眼就看穿你的模板
Vue 3 编译器会逐行分析你的模板语法，识别出哪些内容依赖响应式数据：
-
{{ msg }} → 只影响文本 → 打上
PatchFlags.TEXT（值为 1） -
:class="{ active: isActive }" → 只影响 class → 打上
PatchFlags.CLASS（值为 2） -
:style="{ color: textColor }" → 只影响 style → 打上
PatchFlags.STYLE（值为 4） -
:id="id" :title="title" → 多个普通属性 → 合并为
PatchFlags.PROPS（值为 8） - 如果同时有 class 和文本变化 → 标记变成
1 | 2= 3，运行时按位与就能分别识别
怎么验证 PatchFlag 生效了？三步直接看到数字
别猜，直接看编译结果：
蓝湖代码转vue2.0+element-ui
下载
将静态 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.
- 打开 Vue Devtools → 切到 “Compiler Output” 面板，找你组件的
render()函数，搜索createVNode - 在调用中找第三个或第四个参数，比如
createVNode('div', props, children, 2)—— 这个 2 就是 CLASS 标记 - 开发环境下，也可以在控制台打印：
console.log(instance.$.subTree.patchFlag)，查看根 VNode 的标记值
常见 PatchFlag 值对照表（Vue 3.4+）
这些数字不是随便定的，全是 2 的幂次，方便位运算组合：
- 1：TEXT（文本内容变化）
- 2：CLASS（class 属性变化）
- 4：STYLE（style 属性变化）
- 8：PROPS（其他响应式属性，如 id、data-id）
- 16：FULL_PROPS（props 结构可能变，需完整比对）
- -1：HOISTED（静态提升节点，不参与 diff）
- -2：BAIL（放弃优化，走全量 diff，比如含复杂表达式）
为什么它能提速？跳过比对就是省时间
没有 PatchFlags 时，哪怕只改一个文字，Vue 也要递归检查整个节点的所有属性、子节点、事件监听器……有了它，运行时 patch 逻辑直接分支：
- 看到 flag 是 1 → 只执行
el.textContent = next.children，连 props 都不碰 - 看到 flag 是 2 → 只调用
patchClass(el, prev, next)，不查 style、不遍历 attrs - 看到 flag 是 -1（HOISTED）→ 整个节点跳过，连是否更新都不判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
