#模板编译与运行时优化

#1. Vue 3 的编译优化

Vue 3 的编译器非常智能，它能在编译阶段分析出哪些是静态的，哪些是动态的，从而生成极致优化的渲染函数。

#(1) Patch Flags (动态标记)

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

• TEXT = 1 (只有文本动态)
• CLASS = 2 (只有 Class 动态)
• PROPS = 8 (只有 Props 动态) Diff 阶段：运行时看到这个标记，就只对比变动的部分（如只比 text），完全跳过其他属性的对比。

#(2) Hoist Static (静态提升)

如果一个节点是纯静态的（如 <h2>Title</h2>），它会被提升到 render 函数之外。

• 结果：该 VNode 只会创建一次。后续所有渲染都直接复用这个变量，完全没有创建开销。

#(3) Cache Handlers (事件缓存)

@click="onClick" 默认会被视为动态属性。 开启缓存后，编译器会生成一个内联函数包裹 onClick，只要函数逻辑没变，diff 时就认为这个 prop 没变，避免不必要的组件更新。

#(4) Block Tree

Vue 3 引入了 Block 概念。 Block 会收集内部所有的动态子节点。 Diff 时，不再递归遍历整棵树，而是直接遍历这个扁平的动态节点数组。 结论：Vue 3 的 Diff 性能只跟动态节点的数量有关，跟模板整体大小无关。

#2. 开发建议

• 保持模板静态：尽量把不变的部分用静态 HTML 写，不要滥用 v-if 拆散结构，让编译器能最大化提升。
• v-once: 对不需要更新的区域使用 v-once。