静态提升是vue3编译器将纯静态节点（无插值、指令、动态属性）提取为常量vnode缓存复用的优化策略，仅作用于dom节点而非组件实例，以减少重复创建开销。
编译器不会识别“纯静态组件”，它只识别“纯静态节点”——这是关键前提。Vue3 的静态提升（hoistStatic）作用对象是模板中的 DOM 节点（如
、
、
），而非整个组件实例。所谓“静态组件”，比如
编译器怎么判断一个节点是“纯静态”的？
判断依据是内容与结构的双重稳定性，不依赖任何运行时状态：
- 节点类型必须是普通元素、文本或注释（排除组件、指令容器、插槽出口）
- 没有插值表达式：不含
{{ }}、v-text、v-html - 没有动态绑定：所有属性都是字面量，无
:id、:class、:style等带冒号的绑定 - 没有指令控制结构：不含
v-if、v-else、v-for、v-show（哪怕只是写在父节点上也不行） - 子节点全部满足上述条件：例如一个
<section></section>包含多个静态<p></p>和<h2></h2>，整棵子树可被整体提升
为什么不能“提升整个组件实例”？
组件本质是可复用、有状态、可响应、可挂载/卸载的逻辑单元。即使你写 <logo title="My App"></logo>，只要 Logo 是一个定义了 setup 或 data 的组件，它就具备潜在响应能力、生命周期钩子、事件监听等运行时行为。编译器无法保证它“永远不变化”，因此不会跳过其实例化过程。你看到的“静态提升”效果，仅限于该组件调用节点自身的 VNode 创建（如 props 字面量生成的 attrs 对象），而不是省略组件初始化。
想真正减少组件实例创建？这些技巧更有效
与其期待编译器“跳过组件”，不如从设计和使用方式入手降低开销：
-
用纯函数式标签替代简单组件：把
<logo></logo>拆成<svg class="logo">...</svg>或<div class="logo-text">My App</div>，让编译器真正识别为静态节点并提升 -
避免在高频更新区域嵌套静态组件：比如轮播图切换时，不要把页脚
<footer></footer>放在同一个响应式作用域内；改用<teleport to="#footer-root"><footer></footer></teleport>隔离更新边界 -
对 props 做静态化约束：若组件只接收字面量（如
size="large"、theme="dark"），可在其内部用defineProps({ size: String, theme: String })明确声明，并配合shallowRef或markRaw防止意外响应式代理，减少 proxy 开销 -
用
defineComponent({ name: 'StaticLogo' })+inheritAttrs: false：显式关闭属性透传，避免编译器为未知动态 prop 预留运行时分支，提升静态判定准确率
小结：别混淆“静态节点”和“静态组件”
静态提升是编译器对模板 AST 的静态分析结果，目标明确——减少重复 VNode 创建。它不改变组件模型，也不绕过实例生命周期。真正想减少组件实例数，得靠架构分层、作用域隔离和轻量化设计，而不是指望编译器把组件“变成 HTML 标签”。理解这个边界，才能用好 Vue3 的优化能力。
