patchflag 是 vue 3 编译器自动为 vnode 添加的数字标记，用于标识节点的动态类型（如 text、class），使运行时 diff 算法跳过静态内容、精准更新。
Vue 3 的模板编译器通过 PatchFlag（补丁标志）自动标记动态属性，让运行时的 diff 算法能跳过静态内容、精准定位需更新的 vnode 节点，从而实现按需更新、提升性能。
PatchFlag 是什么？
PatchFlag 是编译器在生成渲染函数时，为 vnode 添加的一个数字标记，表示该节点有哪些类型的动态性。它不是开发者手动写的，而是由编译器根据模板语法自动推断并注入的。
例如：
-
<div id="app" :class="cls">{{ msg }}</div>→ 编译后 vnode 带patchFlag: 9（即TEXT | CLASS） -
<div>Hello</div>→ 静态节点，patchFlag: 0，运行时直接跳过比对
常见的 PatchFlag 类型及对应场景
Vue 3 定义了多个标志位（如 PATCH_TEXT = 1、PATCH_CLASS = 2、PATCH_STYLE = 4、PATCH_PROPS = 8），支持按位或组合。关键类型包括：
-
TEXT（1）：插值表达式，如
{{ msg }} -
CLASS（2）：动态 class，如
:class="cls"或:class="{ active }" -
STYLE（4）：动态 style，如
:style="{ color }" -
PROPS（8）：除 class/style/key 外的其他响应式 prop，如
:id="id"、:disabled="isDisabled" - HYDRATION（16）：仅服务端渲染水合阶段使用
- NEED_PATCH（32）：子节点含动态内容，需递归 patch（常见于有 v-if/v-for 的容器）
多个动态属性会合并标志，比如同时有 class 和 text → patchFlag: 3（2 | 1）。
编译器如何识别并打标？
模板编译器（@vue/compiler-dom）在解析 AST 后，会对每个 element 或 text 节点做“动态性分析”：
- 检查属性是否含
v-指令、:绑定、@事件等 - 判断插值是否纯静态（如
{{ 'hello' }}不打标；{{ msg }}打 TEXT） - 对 class/style 做特殊处理：对象/数组语法统一归为 CLASS/STYLE；字符串拼接（
:class="'a' + cls"）也触发 CLASS - 普通属性若绑定的是响应式变量（非字面量），则归为 PROPS
注意：key、ref、ref_in_for 等特殊属性不参与 PatchFlag，它们走独立逻辑。
开发者能做什么？
你不需要手动设置 PatchFlag，但可以借助它优化模板写法：
- 避免无谓的绑定：静态 class 写成
class="btn"，别写:class="'btn'" - 合并 class/style：用对象语法
:class="{ active, disabled }"比多次绑定更易被识别为单个 CLASS 标志 - 静态内容尽量外提：把大段静态 HTML 放进 computed 或常量，减少编译器分析负担
- 查看编译结果：用 Vue Template Explorer 粘贴模板，观察生成的 render 函数和 patchFlag 数值
理解 PatchFlag 不是为了改它，而是读懂 Vue 的优化意图，写出更“友好”的模板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
