PatchFlag 是 Vue 3 编译器注入的动态标记，用于标识 VNode 中需更新的部分；它使 diff 算法跳过静态 class，仅比对带 CLASS（值为4）等标志的动态 class，从而加速更新。
什么是 PatchFlag？它为什么能加速 Class 更新？
PatchFlag 是 Vue 3 编译器在模板编译阶段自动注入的标记，用于标识 VNode 中哪些部分是“动态的”，从而让运行时的 diff 算法跳过静态内容、聚焦关键更新。当 class 绑定含动态表达式（如 :class="['static', isActive ? 'active' : '']"），Vue 会为该 class 属性打上 PATCHED 或更细粒度的 CLASS 标志（即 1 ），告诉 patch 过程：“这里只需比对 class 字符串，不用递归对比整个属性对象”。
Class 动态绑定写法影响 PatchFlag 类型
不同写法触发的 PatchFlag 级别不同，直接影响 diff 开销：
-
数组语法 + 纯布尔判断：如
:class="['a', { b: isB, c: isC }]"→ 触发CLASS标志（值为 4），patch 时只计算 class 字符串并全量替换，不深比对对象 -
对象语法 + 多个响应式字段：如
:class="{ a: isA, b: isB, c: isC }"→ 同样归为CLASS，但若字段过多且频繁切换，仍建议收口为计算属性减少依赖追踪开销 -
内联字符串拼接：如
:class="'a ' + (isB ? 'b' : '') + ' c'"→ 无法被静态提升，每次更新都重新执行字符串运算，且打PATCHED（值为 1），需全量比对整个 class 属性，效率最低
手动优化技巧：用 computed 控制 class 计算时机
响应式依赖越多，class 表达式越复杂，越容易因细粒度响应触发冗余更新。将 class 逻辑提取到 computed 中，不仅能利用缓存避免重复计算，还能让编译器更准确识别可静态提升的部分：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 把分散的布尔状态聚合：比如
computed(() => ({ active: isActive, disabled: isDisabled, theme: themeType })) - 避免在模板中调用方法生成 class：
:class="getClass()"会让 patch 无法跳过，且每次 render 都执行函数 - 静态 class 尽量写在 class 属性里，而非绑定中：
class="static-a static-b" :class="{ dynamic: isDynamic }"比全写在:class里更利于 PatchFlag 识别静态部分
验证是否生效：看生成的 render 函数
打开 Vue Devtools 的“Compiler Output”面板，或查看 SFC 编译后的 JS，搜索 createVNode 调用。若 class 绑定旁出现类似 PatchFlags.CLASS 或数字 4，说明优化已生效。也可在控制台打印 vnode：console.log(instance.$.subTree.patchFlag)（仅开发环境），观察 class 所在元素的 flag 值。
立即学习“前端免费学习笔记（深入）”；
