Vue Academy · 课时

Vue Vapor 模式：编译时优化

Q: 「Vue Vapor 模式：编译时优化」这节课中我会学到什么？

Vapor 模式会移除虚拟 DOM，了解这对性能的影响，以及选择性启用编译 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

Vapor 模式会移除虚拟 DOM，了解这对性能的影响，以及选择性启用编译

Vue Vapor 模式：编译时优化 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 Vapor Mode

Vapor Mode 是 Vue 的一种替代编译策略，会完全移除虚拟 DOM。编译器不再比较 VNode 树，而是生成直接更新真实 DOM 节点的代码。它需要显式启用，目标是大幅提升性能并减少内存占用。

虚拟 DOM 如今的工作方式

通常，渲染函数会返回一棵虚拟节点树。每次更新时，Vue 都会创建一棵新树，并将它与旧树进行比较以找出变化。这种比较会产生运行时开销，并且每次渲染都会分配对象。

// conceptually, each render produces VNodes
function render() {
  return h('div', null, [
    h('span', null, count.value)
  ])
}
// Vue diffs new VNodes vs old to patch the DOM

Vapor：直接更新 DOM

在 Vapor Mode 中，编译器会在编译时分析模板，并生成只触及可能发生变化的特定 DOM 节点的代码。不再需要 VNode 树，也不再需要比较——响应式 effect 会直接写入节点。

// conceptual Vapor output
const n0 = document.createElement('span')
// effect updates ONLY the text node when count changes
renderEffect(() => {
  n0.textContent = count.value
})

相同的响应式系统

Vapor 保留了 Vue 熟悉的响应式机制——ref、reactive、computed 和 watch 的工作方式都不变。变化的是 DOM 更新的应用方式，而不是声明响应式状态的方式。

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
// identical authoring experience under Vapor

按组件选择启用

Vapor 按组件启用，而不是全局启用。这样您就可以逐步迁移，并在同一个应用中混用 Vapor 组件和非 Vapor 组件。常见做法是在 <script setup> 或构建配置中添加标记。

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

为什么更快

由于跳过了 VNode 的创建和差异比较，Vapor 减少了每次更新所需的 CPU 工作，并且分配的对象大幅减少，从而减轻了垃圾回收压力。初始挂载也会产生更少的运行时开销，降低内存占用。

更小的运行时

由于 Vapor 组件不需要虚拟 DOM 运行时，完全使用 Vapor 构建的应用可以发布更小的运行时构建包。差异比较机制根本不会被包含在其中。

编译时分析

其强大之处在于编译器能够区分模板中的静态部分和动态部分。静态标记只创建一次；只有动态绑定会获得响应式副作用。正是这种静态与动态的拆分实现了直接更新。

<template>
  <div class="card">     <!-- static, created once -->
    <h2>{{ title }}</h2>  <!-- dynamic, gets an effect -->
  </div>
</template>

限制与互操作

在实验阶段，某些依赖虚拟 DOM 的功能和第三方库（例如自定义渲染函数以及某些 VNode API）在 Vapor 组件中可能尚未得到完全支持。Vapor 支持与普通组件互操作，因此您可以逐步采用它。

与 Solid 和 Svelte 的关系

Vapor 让 Vue 更接近由 Solid 和 Svelte 首创的编译时、无虚拟 DOM方案——通过细粒度响应式直接驱动 DOM 修改，同时保留 Vue 的 API 和生态系统。

何时选择 Vapor

Vapor 稳定后，可以考虑将它用于对性能要求高且更新频繁的用户界面（大型列表、仪表盘、动画）。对于典型应用，标准运行时已经足够快；请根据性能分析结果，在确实有帮助的地方选择性采用 Vapor。

快速检查

请测试您对 Vapor 模式的理解。

回顾

您已经了解了 Vapor 模式：

移除虚拟 DOM 差异比较；编译器生成直接更新 DOM 的代码
使用相同的响应式系统——ref、reactive、computed 均不变
按组件选择启用，支持逐步采用和互操作
静态与动态的编译时分析为细粒度更新提供动力
预计可显著提升性能、降低内存占用并缩小运行时体积

常见问题解答

「Vue Vapor 模式：编译时优化」课时是免费的吗？

是的 — 「Vue Vapor 模式：编译时优化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Vue Vapor 模式：编译时优化」这节课中我会学到什么？

Vapor 模式会移除虚拟 DOM，了解这对性能的影响，以及选择性启用编译你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Vue Vapor 模式：编译时优化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy