Vue 3 的性能提升并非单一技术点的突破，而是编译时智能分析与运行时高效执行相互配合的结果。这套优化大多对开发者透明，但理解其原理能帮你写出更契合框架设计、渲染效率更高的代码。
编译时优化：把“重活”提前做掉
在模板编译阶段（将 .vue 文件中的 <template> 转换为渲染函数），Vue 3 会静态分析整个模板结构，为运行时做好充分准备。
1. 静态提升
如果一个节点完全不依赖任何响应式数据，它就被定义为“静态节点”。编译器会把这些节点的创建逻辑提升到渲染函数外部，使其只创建一次虚拟 DOM，后续每次更新直接复用，完全不参与对比。
<div>
<h1>这是永远不会变的标题</h1>
<p>{{ message }}</p>
</div>编译后，<h1> 对应的虚拟节点对象会在模块初始化时生成一次并缓存，运行时 Diff 只处理 p 标签及其内部的动态文本。对于包含大量静态布局的管理后台或文档页面，这种优化能跳过 90% 以上的虚拟 DOM 对比开销。
2. 预字符串化
当多个静态节点连续出现时（例如一长串无动态绑定的 HTML），编译器甚至会把它们整体编译成一个字符串，通过 innerHTML 或 createStaticVNode 函数直接创建，连虚拟 DOM 创建和 Diff 的过程都免了。这特别适合展示大段格式化文本或静态表格的场景。
3. PatchFlags（动态标记）
对于包含动态内容的元素，编译器不会笼统地标记为“可能变化”，而是用一个数字标记具体哪种内容会变：
1：文本内容会变（<p>{{ msg }}</p>）2：class 会变（<p :class="cls"></p>）4：style 会变8：props 会变64：事件需要动态绑定
运行时根据这些标记只比对标记对应的属性，不再全属性打散比较。例如一个只有文本变化的元素，运行时只需检查新旧的文本是否一致，而不必触碰 class、style、事件等不相关的内容。
4. Block 树与靶向更新
模板编译时，编译器会识别出所有可能包含动态内容的根节点（Block 节点），并把它们内部的动态子节点（带 PatchFlags 的节点）收集到一个展平的动态子节点数组里。更新时，只需遍历这个扁平数组，直接定位到需要更新的动态节点，完全跳过静态内容的层层嵌套。
这种“靶向更新”让 Diff 从树形递归变为线性遍历，极大减少了遍历层级，在多级嵌套的组件结构下仍有出色表现。
运行时优化：让执行更轻更快
1. 更快的虚拟 DOM 创建
Vue 3 重写了虚拟 DOM 的实现，使用 createVNode 等函数直接返回简洁的 VNode 对象，减少了属性标准化和不必要的闭包。配合静态标记，大部分节点甚至不需要完整的 VNode 结构。
2. 响应式系统的 Proxy 化
Vue 3 用 Proxy 替代了 Vue 2 的 Object.defineProperty，实现了对数组和对象更统一、更彻底的透传代理。Proxy 的拦截粒度更细，不需要递归劫持对象的每个属性，只在真正访问到深层属性时再做响应式包装。这让初始化、深层对象遍历时的性能明显提升。
3. 更智能的列表 Diff
对于 v-for 渲染的列表，Vue 3 采用“最长递增子序列”算法来找到无需移动的节点。新老两组子节点对比时，通过序列算法得出最小移动次数，减少不必要的 DOM 插入/删除操作。相比 Vue 2 的双端对比，它在大量元素移动的场景（如列表乱序）中表现更优。
4. 编译结果缓存
利用 Vue 3 的模块化设计，编译产物可以被有效缓存，运行时直接复用。SFC 编译、模板预编译等环节让生产环境中几乎不存在编译耗时。
开发者视角：自动优化，但仍能“助攻”
以上优化全部默认开启，开发者无需显式调用任何 API。但从编写模板的角度看，遵循以下习惯能让编译器更“卖力”：
- 合理使用
v-once或静态内容：真正不变的内容可以用v-once明确标记，编译器会据此更激进地提升或预字符串化。 - 不含动态绑定的纯展示结构尽量做得“静态”，避免在不需要响应的属性上强行绑定一个不变的数据。
v-for的key提供唯一稳定标识，以帮助最长递增子序列算法发挥最大作用，避免不必要的 DOM 重建。
这些编译时与运行时的深层优化，共同造就了 Vue 3 在同类框架中第一梯队的更新性能，也让开发者可以在大多数场景中“零成本”享受高性能渲染。