#模板编译优化

Vue 3 在编译阶段做的优化

#Patch Flags

编译器给动态节点打上数字标记：

• 1 = 只有文本动态
• 2 = 只有 Class 动态
• 8 = 只有 Props 动态

Diff 时只对比变动的部分，跳过其他属性。

#Hoist Static

静态节点提升到 render 函数之外，VNode 只创建一次，后续渲染直接复用。

#Cache Handlers

事件绑定开启缓存后，函数逻辑没变就认为 prop 没变，避免不必要的更新。

#Block Tree

Block 收集内部所有动态子节点。Diff 时直接遍历扁平的动态数组，性能只跟动态节点数量有关。

#开发建议

• 保持模板静态，别滥用 v-if 拆散结构
• 对不更新的区域用 v-once