介绍了 Vue 3 的新编译策略 Vapor Mode，它将无虚拟 DOM，利用内置响应性系统提升性能。Vapor Mode 目前处于实验阶段，可以选择性地启用，且有望在同一应用中混合使用 Vapor 和非 Vapor 组件。未来，Vapor Mode 将逐步完善功能，提供更高性能的输出和更灵活的组件集成方式。今日前端早读课文章由 @CUGGZ 分享，公号：前端充电宝授权。
正文从这开始～～
在 2022 年的 VueConf 活动中，Vue 的作者尤雨溪首次提出了 Vapor Mode 的概念，这是一个受到 Solid 启发的编译策略，它打破了对虚拟 DOM 的依赖，转而充分利用 Vue 内置的响应性系统，带来了显著的性能提升。目前，Vapor Mode 已经推出了实验版本，可以在 steam-repl.netlify.app 上先行体验。
下面就来看看 Vapor Mode 是什么，如何使用，以及它的未来！
Vapor Mode 概念
Vapor Mode 是一种正在试验中的编译策略，其灵感来源于 Solid。对于相同的 Vue SFC，与当前基于虚拟 DOM 的编译结果相比，Vapor Mode 能够生成性能更高、内存使用更少、运行时支持代码更少的 JavaScript 输出。它的目标是通过编译为更高效的 JavaScript 来提升应用的性能。当在应用级别使用时，Vapor Mode 可以完全去除虚拟 DOM，从而减小应用的包大小，进一步优化应用的性能。
Vapor Mode 目前仍处于开发阶段，相关要点如下：
- Vapor Mode 主要适用于对性能有高要求的场景。它作为一项可选功能，不会对现有代码库产生影响。
- 开发者能够将 Vapor 组件子树无缝集成到现有的 Vue 3 应用中。理想情况下，我们希望在组件级别实现粒度选择，使 Vapor 组件和非 Vapor 组件能在同一个应用中自由混用。
- 仅使用 Vapor 组件构建应用可以显著减少 bundle 中的虚拟 DOM 运行时，从而降低基准运行时大小。
- 为了实现最佳性能，Vapor Mode 将仅支持 Vue 功能的一个子集。具体来说，Vapor Mode 组件将仅支持 Composition API 和
<script setup>。这个受支持的子集在 Vapor 和非 Vapor 组件之间具有相同的工作方式。
✅ 使用 Vapor Mode 的好处如下：
- 性能更佳
- 使用更少的内存
- 需要更少的运行时支持代码。
Vapor Mode 期望实现的功能如下，目前还有一部分正在实现中：
Vapor Mode 使用
在组件层面
可以使用 .vapor 文件名后缀来启用它。
最终目标是在同一个应用中自由混合 Vapor 和非 Vapor 组件。
注意：Vapor Mode 最初将仅使用 Vapor 树集成到 vDOM 中，并在此基础上逐步提高它们之间的互操作性。
在应用层面
通过这种方式编译的应用程序将能够完全删除虚拟 DOM 运行时，只包含极为轻量级的 @vue/reactivity 和 vapor mode 运行时辅助程序。与当前使用虚拟 DOM 的 Vue 3 应用的基线大小（约 50KB）相比，这样编写应用的基线大小仅为约 6KB，实现了高达 88% 的压缩比！
关键点
- 这是一项可选功能，不会影响现有的代码库。如果计划将 Vue 版本升级到包含 Vapor Mode 的版本，这不会引入任何与 Vapor Mode 相关的重大更改。
- Vapor Mode 将能够与 vDOM 组件进行互操作。因此，如果希望使用像 Vuetify 这样的虚拟 DOM 库， Vapor Mode 仍然能够支持它。
Vapor Mode 未来
Vapor Mode 仍在开发中，目前正处于第三阶段。
