hoistStatic（静态提升）优化原理

在 Vue3 中，hoistStatic（静态提升）是编译器层面的一种性能优化手段，其核心原理是将模板中的纯静态内容（不依赖任何动态数据、不会随状态变化的内容）提取到渲染函数之外，避免在每次组件渲染时重复创建这些内容，从而减少内存占用和重复计算，提升渲染性能。

为什么需要静态提升？

在 Vue2 或未开启静态提升的情况下，组件每次重新渲染（如响应式数据变化触发更新）时，模板中的所有节点（包括完全静态的节点，如固定文本、无动态绑定的元素）都会被重新创建为虚拟 DOM 节点。
例如，一个包含大量静态文本和元素的模板，即使这些内容从未变化，每次渲染都会重复生成相同的虚拟 DOM 结构，造成不必要的性能开销。

静态提升（hoistStatic）的工作原理

Vue3 编译器在编译模板时，会分析并识别出纯静态的节点或片段（如：<div class="static">固定文本</div> 这种无任何动态绑定、指令（v-if/v-for 等）、插值的内容），然后将它们“提升”到组件渲染函数（render 函数）的外部，作为全局变量存储。

这样，无论组件重新渲染多少次，这些静态内容都只会被创建一次，后续渲染时直接复用已创建的虚拟 DOM 节点，避免重复生成。

优化效果示例

未开启静态提升时：

模板中的静态内容会被包含在渲染函数内部，每次渲染都会重新创建：


<template>
  <div>
    <p>静态文本1</p>
    <p>静态文本2</p>
    <p>{{ dynamicText }}</p> <!-- 动态内容 -->
  </div>
</template>

编译后的 render 函数（简化）：


function render(ctx) {
  return createElementVNode('div', null, [
    createElementVNode('p', null, '静态文本1'), // 每次渲染都重新创建
    createElementVNode('p', null, '静态文本2'), // 每次渲染都重新创建
    createTextVNode(ctx.dynamicText, 1 /* TEXT */)
  ])
}

开启静态提升后：

静态内容被提取到 render 函数外部，只创建一次：


// 静态内容被提升到渲染函数外，全局复用
const hoisted = [
  createElementVNode('p', null, '静态文本1'),
  createElementVNode('p', null, '静态文本2')
]

function render(ctx) {
  return createElementVNode('div', null, [
    ...hoisted, // 直接复用已创建的静态节点
    createTextVNode(ctx.dynamicText, 1 /* TEXT */)
  ])
}

可以看到，静态节点 hoisted 在组件生命周期内只会初始化一次，后续渲染时直接引用，避免了重复创建的开销。