静态提升是Vue 3编译器将模板中内容与结构均静态的节点提取为常量VNode以复用，避免重复创建和diff比对；它与Patch Flag协同实现精准更新。
Hoisting（静态提升）是 Vue 3 编译器在构建阶段自动执行的一项优化，它把模板中完全不变的节点（比如纯文本、固定 class、静态 div 结构）抽出来，只创建一次，后续渲染直接复用。这直接减少了每次更新时重复创建 VNode 的开销，也间接降低了 Patch 过程中的比对压力——因为静态部分根本不需要参与 diff。
哪些内容会被静态提升？
满足以下两个条件的节点才会被识别为“静态”并提升：
- 内容静态：不含任何响应式绑定，比如没有 {{ msg }}、:class、@click 或 v-bind 等动态语法
- 结构静态：不会被 v-if、v-for、v-show 等指令控制显隐或增删
例如： © 2026 版权所有公司官网
这段代码里没有动态插值、没有指令控制，整个结构稳定，就会被整体提升为一个常量 VNode 节点。
静态提升怎么减轻 Patch 压力？
Patch 是 Vue 运行时对比新旧 VNode 并打补丁的过程。如果大量节点都是静态的，但每次还都参与 diff，等于反复比对一模一样的东西。静态提升从源头上让这些节点“退出”比对流程：
- 提升后的静态节点不进入组件的 render 函数体，也就不会出现在每次生成的新 VNode 树中
- 运行时 diff 只聚焦于真正可能变化的动态节点，比对路径大幅缩短
- 配合 Patch Flags，Vue 能进一步跳过静态子树下的属性比对（比如 class、style 等）
你可以主动配合的写法
编译器的静态提升能力很强，但不是万能的。有些看似静态的写法，会意外破坏提升效果：
- 避免在静态标签里混用动态绑定，比如 → 整个 div 就不再是静态节点
- 不要用 v-if="true" 或 v-show="true" 包裹静态内容，这会让结构失去“稳定性”
- 连续多个静态节点（≥10 个）会被自动字符串化合并，所以适当组织 HTML 结构也有助于提升效率
- 组件根节点若含动态 prop（哪怕只是 key），会抑制其子树的静态提升，注意封装粒度
Patch Flag 和静态提升如何协同工作？
静态提升解决“谁不用比”，Patch Flag 解决“比什么”。两者是编译阶段的一体两面：
- 静态提升后剩下的动态节点，编译器会按更新类型打上标志，比如 PATCH_TEXT（仅文本变）、PATCH_CLASS（仅 class 变）
- 运行时 diff 根据 flag 快速定位需更新的字段，跳过其他属性（如 props、style、children）的深度比对
- 二者叠加，使一次更新从“全量树对比”变成“精准字段修补”，尤其在列表滚动、表单联动等高频场景下效果显著
