静态提升在复杂组件中可显著优化性能，适用于大型表单的固定结构、布局中的静态侧边栏/页脚、高频更新区域外的静态子组件调用，以及文档类组件中的静态HTML区块，前提是这些内容不含响应式绑定。
静态提升在复杂组件中的应用场景
静态提升不是只对简单页面生效的“装饰性优化”，它在真实项目里，尤其在结构复杂、嵌套深、更新频繁的组件中，能切实缓解性能压力。关键不在于组件多大，而在于其中有多少内容“其实根本不会变”。
大型表单页里的固定结构区域
一个带校验、分步、动态字段的表单组件，往往包含大量不变的 UI 框架层：标题栏、步骤指示器、提交按钮文案、底部版权信息等。这些节点只要不依赖 {{ }}、:class、v-if 或任何响应式变量，就会被整体提升。
- 例如：
<div class="form-header"><h2>用户注册</h2><p>请填写以下信息</p></div>—— 整个<div>子树可被提升为_hoisted_1 - 好处：切换表单步骤或触发校验时，这些区域完全跳过 VNode 创建和 diff，渲染函数只聚焦于真正变化的输入框、错误提示等动态部分
布局容器中的静态侧边栏/页脚
在使用 Layout + Page 模式的 SPA 中，主布局组件常含固定导航、侧边栏、页脚。它们通常由 props 控制显隐，但内容本身是字面量（如菜单项 title、图标 name、备案号文本）。
- 若侧边栏未用
v-if或v-for，且所有属性（class、title、icon）均为字符串字面量，整棵树可被提升 - 注意：一旦加入
:class="isActive ? 'open' : ''"或v-show="isMenuOpen"，该节点即失效——编译器会保守放弃提升
高频率更新区域外的静态子组件调用
比如轮播图（每 3 秒重渲染）内部嵌套了一个 <Logo />。虽然 Logo 组件本身是动态实例，但它的调用节点若满足静态条件（如 <Logo title="MyApp" />，且 Logo 内部无响应式逻辑），其生成的 VNode 属性对象（如 { title: "MyApp" }）会被单独提升。
- 效果：每次轮播切换，Logo 的 props 对象复用，避免重复构造 attrs
- 进阶做法：配合
defineProps({ title: String })显式声明 +markRaw防代理，进一步减少响应式开销
文档类组件中的静态区块
帮助中心、产品说明页等以内容展示为主的组件，模板中常混杂大段 HTML 结构：标题、列表、代码块、引用框。只要这些区块不含插值、指令或动态绑定，Vue 编译器会将整个 <section> 或 <article> 提升为常量 vnode。
- 典型例子：
<section><h3>安装步骤</h3><ol><li>npm install xxx</li></ol></section> - 优势：用户点击不同文档 tab 时，只有当前激活内容重新渲染；其余静态区块全程复用，滚动也更顺滑
