静态提升是vue 3编译阶段将纯静态节点（无插值、无指令、属性全字面量、子树全静态）提取为顶层常量vnode，渲染时直接复用，减少vnode创建开销、垃圾回收压力及diff负担，提升首屏与更新性能。
静态提升是 Vue 3 在编译阶段就完成的一项关键优化，它把模板里完全不变的节点提前创建好、缓存起来，后续渲染直接复用，不重新造轮子。这省下的不是几毫秒，而是大量 VNode 创建开销和垃圾回收压力。
哪些节点会被提升？
只要一个节点满足“纯静态”条件，编译器就会把它拎出来单独处理：
- 没有插值表达式（比如
{{ message }}） - 不带任何指令（
v-if、v-for、v-bind、v-on都不行） - class、style 等属性全是字符串字面量，没有动态绑定（如
:class="cls"就不行，class="btn"可以） - 内部子节点也全部满足上述条件（整棵子树都静止才作数）
它怎么悄悄起作用？
你写的模板在构建时就被编译器扫描分析，符合静态条件的节点会被抽出来，在组件模块顶层生成常量 VNode，比如：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const _hoisted_1 = createVNode('h1', null, '欢迎页')
而 render 函数里只保留动态部分，每次更新只需执行真正变化的部分：
return createVNode('div', [ _hoisted_1, createVNode('p', null, _toDisplayString(msg)) ])
为什么这点优化很实在？
它解决的是 Vue 2 时代的老问题：哪怕只改一个按钮文字，整个 DOM 树都要重建一遍。Vue 3 把“不变”的部分固化下来，让 diff 更轻、内存更稳、首屏更快：
- 首次渲染多占一点内存（存几个常量），但后续零新增
- 避免重复调用
createVNode，减少函数调用栈和对象分配 - 配合 Block Tree，让 patch 过程跳过整块静态区域，效率翻倍
你可以做点什么？
静态提升是全自动的，你不用写额外代码，但可以主动配合它：
- 把确定不变的内容写得更“干净”——少用
:class包裹静态类名，能用class="xxx"就别动态拼 - 避免在静态结构里混入响应式逻辑，比如不要在
<footer></footer>里突然加个v-if - 用 Vue Template Explorer 查看编译结果，确认哪些节点被提升了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
