vue 3 通过 patchflag 在编译阶段标记动态内容，运行时仅比对标记部分：text（1）、class（4）、style（8）、props（2）等可叠加；跳过无标记或 static 节点子树；按标记走专用更新路径；结合静态提升复用 vnode，显著提升 diff 效率。
Vue 3 不再对整个虚拟 DOM 树做无差别比对，而是靠 PatchFlag 在编译阶段就标记出“哪些地方可能变”，让运行时的 diff 只聚焦于真正需要检查的部分，大幅减少无效计算。
编译时精准识别动态内容
Vue 3 编译器会逐个分析模板节点，判断其是否依赖响应式数据。一旦发现动态内容，就打上对应的 PatchFlag 数字标记：
-
TEXT（1）：节点内有
{{ msg }}这类插值文本 -
CLASS（4）：用了
:class="cls"这样的动态 class -
STYLE（8）：用了
:style="{ color }" -
PROPS（2）：含动态属性（如
:id="id"），且需配合dynamicProps列表定位具体字段
多个变化可叠加，比如 <div :class="cls">{{ msg }}</div> 会被标记为 CLASS | TEXT（即 4 | 1 = 5），表示只关注 class 和文本两处。
运行时跳过静态子树
diff 过程中，遇到没有 PatchFlag 或标记为 STATIC（-1） 的节点，直接跳过整棵子树，不递归比对。
例如一个包含 10 层嵌套的静态布局块，只要顶层被标记为 STATIC，后续所有子节点都不参与 diff —— 省掉大量对象遍历和属性比较。
按标记类型走专用更新路径
有 PatchFlag 的节点，不会走通用 diff 流程，而是进入对应优化分支：
- 标记为 TEXT → 只比对
children字符串值，不检查 props、style 等 - 标记为 CLASS → 只比对
props.class，忽略其他属性 - 标记为 PROPS → 结合
dynamicProps数组，只检查实际变化的那几个属性名
这样避免了 Vue 2 中“不管有没有变，都要把所有 props 遍历一遍”的低效行为。
与静态提升协同工作
PatchFlag 不是单独起作用的。它和 静态提升（Static Hoisting） 配合，效果更明显：
- 静态节点被提升到 render 函数外，复用同一 VNode 引用
- 这些节点天然带
STATIC标记，diff 时直接跳过 - 动态节点集中分布、数量更少，diff 范围进一步收窄
结果就是：渲染函数执行更快、内存分配更少、垃圾回收压力更低，尤其在列表重绘、表单联动等高频更新场景下优势突出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
