在 Vue 3 的模板编译过程中，静态节点提升（Static Hoisting） 是一项关键的性能优化技术。它解释了为什么某些 DOM 节点在组件的整个生命周期中只被创建一次，以及像 _hoisted_1 这样的变量究竟是什么。这背后是 Vue “编译时优化，运行时高效”设计哲学的直接体现。

---

一、什么是静态节点？

在 Vue 的上下文中，静态节点指的是其内容和属性在组件运行时永远不会改变的节点。

常见的静态节点类型：

1. 纯文本节点：

   <span>Hello World</span>

2. 仅含静态属性的元素：

   <div id="header" class="static-class">Content</div>

3. 不含动态插槽的组件（当其 props 为静态时）：

   <StaticComponent title="Welcome" />

4. 静态 <img> 标签：

   <img src="/logo.png" alt="Logo" />

这些节点的共同特点是：它们不依赖任何响应式数据。无论组件的 data、props 或 computed 如何变化，这些节点的最终渲染结果都保持不变。

---

二、静态节点提升：编译时的“记忆”

静态节点提升的核心思想是：

既然节点不会变，那就只在编译时创建一次，运行时直接复用，避免重复创建。

1. 编译前：无优化的 render 函数

假设我们有以下模板：

<div>
  <p>{{ message }}</p>
  <span>This is static</span>
</div>

如果没有优化，生成的 render 函数可能是：

function render() {
  return h('div', [
    h('p', this.message),
    h('span', 'This is static') // 每次渲染都重新创建
  ]);
}

每次组件更新，h('span', 'This is static') 都会执行，创建一个新的 VNode 对象。

2. 编译后：应用静态提升

Vue 编译器分析模板后，识别出 <span>This is static</span> 是静态节点，将其“提升”到 render 函数外部：

// 提升到 render 函数之外，只创建一次
const _hoisted_1 = h('span', 'This is static');

function render() {
  return h('div', [
    h('p', this.message),
    _hoisted_1 // 直接引用已创建的 VNode
  ]);
}

3. _hoisted_1 是什么？

• _hoisted_1 是一个由 Vue 编译器自动生成的变量名。
• 它存储了一个静态的 VNode 对象。
• 这个对象在组件模块加载时只创建一次，后续所有组件实例都共享同一个引用。

命名规则：

• _hoisted_1, _hoisted_2, _hoisted_3... 按提升顺序编号。
• 前缀 _hoisted_ 表明这是“被提升的”节点。

---

三、为什么只创建一次？性能收益分析

静态节点提升带来了显著的性能优势：

1. 减少内存分配与垃圾回收

• 无提升：每次 render 调用都创建新的 VNode 对象。
• 有提升：VNode 对象只创建一次，后续渲染直接复用。

这减少了内存分配压力和垃圾回收（GC）的频率，尤其在频繁更新的组件中效果显著。

2. 加速 diff 算法（patch 过程）

在 patch 过程中，Vue 会对比新旧 VNode：

// 新 VNode 中的子节点
const newVNode = h('div', [ dynamicVNode, _hoisted_1 ]);

// 旧 VNode 中的子节点
const oldVNode = h('div', [ oldDynamicVNode, _hoisted_1 ]);

由于 _hoisted_1 在新旧 VNode 中引用完全相同（===），patch 算法可以立即判定：

“这个节点没有变化，无需进一步 diff，直接复用对应的真实 DOM。”

这跳过了对静态子树的深度遍历，极大提升了更新性能。

3. 降低 CPU 开销

避免了重复调用 h() 函数、对象创建和属性初始化等操作，降低了 CPU 计算开销。

---

四、静态提升的触发条件

并非所有节点都能被提升。编译器会进行严格的分析：

✅ 可被提升的节点：

• 纯文本。
• 仅含静态 class、style、id 等属性的元素。
• 静态的 img、input（type="text" 且无 v-model）等。
• 静态的组件调用（如 <Icon name="home" />）。

❌ 不可被提升的节点：

• 包含插值 的文本。
• 含动态指令的元素（v-if, v-for, v-show）。
• 含动态属性的元素（:class, :style, @click）。
• 包含作用域插槽的组件。

---

五、实际案例：复杂模板的提升

<template>
  <div class="container">
    <!-- 静态提升 -->
    <header>
      <h1>My App</h1>
      <nav>
        <a href="/home">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>

    <!-- 动态部分 -->
    <main>
      <article v-for="post in posts" :key="post.id">
        <h2>{{ post.title }}</h2>
        <p>{{ post.excerpt }}</p>
      </article>
    </main>
  </div>
</template>

编译后：

// 整个 header 树被提升
const _hoisted_1 = h('h1', 'My App');
const _hoisted_2 = h('a', { href: '/home' }, 'Home');
const _hoisted_3 = h('a', { href: '/about' }, 'About');
const _hoisted_4 = h('nav', [ _hoisted_2, _hoisted_3 ]);
const _hoisted_5 = h('header', [ _hoisted_1, _hoisted_4 ]);

function render() {
  return h('div', { class: 'container' }, [
    _hoisted_5, // 直接复用
    h('main', 
      this.posts.map(post => 
        h('article', { key: post.id }, [
          h('h2', post.title),
          h('p', post.excerpt)
        ])
      )
    )
  ]);
}

• header 及其所有子元素被完全提升，只创建一次。
• 只有 main 中的动态列表需要在每次更新时重新生成 VNode。

---

六、与 React 的对比

• React (JSX)：在运行时通过 React.createElement 创建元素，无法进行静态提升（除非使用 React.memo 等手动优化）。
• Vue (模板)：在编译时自动分析并提升静态节点，无需开发者干预。

这使得 Vue 模板在静态内容较多的场景下，性能通常优于 JSX。

---

七、总结

• 静态节点提升：Vue 编译器将运行时不会改变的 VNode 提升到 render 函数外部，实现一次创建，永久复用。
• _hoisted_1：编译器生成的变量，存储被提升的静态 VNode。
• 性能收益：
  • 减少内存分配和 GC。
  • 加速 patch 过程，跳过静态子树的 diff。
  • 降低 CPU 开销。

这项优化是 Vue 3 高性能的关键之一。它让开发者可以自由编写包含大量静态结构的模板，而无需担心运行时性能问题。理解 hoisting，就是理解 Vue 如何将“编译时的智慧”转化为“运行时的速度”。