即将到来的 Vue 3 “Vapor Mode” _Vue

今年年初，尤雨溪在 2023 新年展望中提到了 Vue 3 “Vapor Mode”：

Vapor Mode 是一直在试验的另一种编译策略，其灵感来自于 Solid 。给定相同的 Vue SFC，与当前基于虚拟 DOM 的输出相比，Vapor Mode 将其编译成性能更高、使用更少内存且需要更少运行时支持代码的 JAVAScript 输出。它仍处于早期阶段，这里有一些相关的要点：

Vapor Mode 适用于主要关注性能的用例。它是可选的，不会影响现有的代码库。

开发者将能够将 Vapor 组件子树嵌入到任何现有的 Vue 3 应用中。在理想情况下，希望可以在组件级别实现粒度选择，这意味着可以在同一个应用中自由混合 Vapor 组件和非 Vapor 组件。

仅使用 Vapor 组件构建应用允许从 bundle 中删除虚拟 DOM 运行时，从而显著减少 baseline 运行时大小。

为了获得最佳性能，Vapor Mode 将仅支持 Vue 功能的一个子集。特别是，Vapor Mode 组件将仅支持 Composition API 和 <script setup> 。但是，这个受支持的子集在 Vapor 和非 Vapor 组件之间的工作方式完全相同。

下面就来详细看看， Vapor Mode 是什么，它是如何工作的，以及它的未来！
Vapor Mode 是什么？Vapor 模式是受 Solid.js 启发的一种新的替代编译策略。它旨在通过将代码编译为更高效的 JavaScript 输出来增强应用的性能。
当在应用级别使用时，可以完全删除虚拟 DOM，从而减少应用的包大小。
? 使用 Vapor Mode 的好处如下：

性能更佳
使用更少的内存
需要更少的运行时支持代码。

Solid.js 具有与 Vue 非常相似的响应式系统，它们都在其响应式系统中使用代理，并具有基于读取的自动跟踪。这就是为什么 Vue 可以实现与 Solid.js 类似的编译策略。
Vapor Mode 如何工作？给定相同的 .vue 单文件组件，Vapor Mode 能够将其编译为性能更高的 JavaScript 输出。

文章插图
【即将到来的 Vue 3 “Vapor Mode”】为了实现最佳性能，Vapor Mode 仅支持 Vue 功能的一个子集，包括新的 Composition API 和带有＜script setup＞的.vue单文件组件（SFC），这些是 Vue 3 的新默认应用编写方式。
现状目前， Vue 采用混合 VDOM/编译器方法。编译器获取 SFC 的模板，对其进行分析并将其提供给虚拟 DOM 。
这种编译器通知的虚拟 DOM 方法使 Vue 在执行 DOM 操作时比 Svelte 4 等无 V-DOM 工具表现得更好。

文章插图
如何使用 Vapor Mode？在组件层面可以使用 .vapor 文件名后缀来启用它。

文章插图
最终目标是在同一个应用中自由混合 Vapor 和非 Vapor 组件。

文章插图
注意：Vapor Mode 最初将仅使用 Vapor 树集成到 vDOM 中，并在此基础上逐步提高它们之间的互操作性。
在应用层面

文章插图
通过这种方式编译的应用程序将能够完全删除虚拟 DOM 运行时，只包含极为轻量级的@vue/reactivity和 vapor mode 运行时辅助程序。与当前使用 vDOM 的 Vue 3 应用的基线大?。ㄔ?50KB）相比，这样编写应用的基线大小仅为约 6KB，实现了高达 88%的压缩比！
关键点这是一项可选功能，不会影响现有的代码库。如果计划将 Vue 版本升级到包含 Vapor Mode 的版本，这不会引入任何与 Vapor Mode 相关的重大更改。
Vapor Mode 将能够与 vDOM 组件进行互操作。因此，如果希望使用像 Vuetify 这样的虚拟 DOM 库， Vapor Mode 仍然能够支持它。
Vapor Mode 发展阶段Vapor Mode 仍在开发中，下面有一些相关消息：
第一阶段：核心功能的运行时在这个阶段，引入了所有 Vapor 运行时相关的帮助生成代码的辅助程序。这个阶段已经基本完成。
?? 阶段目标：