什么是蒸汽模式？
蒸汽模式是受 Solid.js 启发的一种新的替代编译策略。它旨在通过将代码编译为更高效的 JavaScript 输出来提高应用程序的性能。
在应用级别使用时，您可以完全删除虚拟 DOM，从而减小应用的捆绑包大小。
好处
性能更强
使用更少的内存
需要较少的运行时支持代码。
Solid.js 有一个与 Vue 非常相似的反应式系统，它们都在响应式系统中使用代理，并具有基于读取的自动跟踪。这就是为什么 Vue 可以实现与 Solid.js 类似的编译策略。
蒸汽模式如何工作？
给定相同的单个文件组件，Vapor 模式将能够将其编译为性能更高的 JavaScript 输出。.vue
为了优化最佳性能，Vapor 模式将只支持 Vue 功能的一个子集，这些功能是新的组合式 API 和 SFC，这是 Vue 3 编写应用程序的新默认方式。 阅读更多关于 Vue 的年度回顾。.vue<script setup>
目前的方法是什么？
目前，Vue 采用混合 VDOM/Compiler 方法。编译器获取 SFC 的模板，对其进行分析并将 a 馈送到虚拟 DOM。
这种编译器告知的虚拟 DOM 方法允许 Vue 在执行 DOM 操作时比 Svelte 4 等无 V-DOM 的工具表现得更好。
React / Svelte / Vue Benchmark
你的眼睛没有欺骗
你
Vue 3 目前的表现优于 Svelte 和 React。pic.twitter.com/E6H4OfqGp2
—：icarus.gk （@icarusgkx） 2023年8月21日
如何使用蒸汽模式？
在组件级别。
您将能够使用文件名后缀启用它。.vapor
最终目标是在同一应用程序中自由混合 Vapor 和非 Vapor 组件。
* 注意
最初，蒸汽模式可以从集成到 vDOM 中的纯蒸汽树开始，然后从那里提高它们之间的互操作性。
在应用级别。
以这种方式编译的应用程序将能够完全删除虚拟 DOM 运行时，并且仅包含@vue/反应性和蒸汽模式运行时帮助程序，这些助手非常轻量级。以这种方式编写的应用程序的基线大小为 ~6kb，而当前带有 vDOM 的基线 Vue 3 应用程序的基线大小为 ~50kb。这减少了 88%！
要点
这是一项可选功能，不会影响现有代码库。
如果你决定将你的 Vue 版本升级到包含 Vapor Mode 的版本，这不会引入任何与 Vapor Mode 相关的重大更改。
Vapor 模式将能够与 vDOM 组件进行互操作。
因此，如果您想使用任何使用虚拟 DOM 的库，例如 Vuetify，Vapor 模式仍然能够支持它。
蒸汽模式级
虽然仍在开发中，但我们有一些关于它的新闻：
第 1 阶段：核心功能的运行时
所有 Vapor 运行时助手都引入了，这些助手基本上是帮助生成代码的代码。这个阶段差不多完成了。
目标
支持核心指令 （） 和组件树。v-on, v-if, v-for, etc...
验证性能假设。
与现有 SSR 输出的水化兼容性。
第 2 阶段：核心功能的编译器
这里的主要重点是确保我们可以采用 Vue 模板或 JSX 并将其转换为运行时可以处理的东西。
目标
共享代码生成 IR（中间表示）
JSX AST / 模板 AST - IR - 蒸汽模式代码
为什么要进行中间表示？
由于没有虚拟 DOM，Vapor Mode 的编译过程消除了手动创建渲染函数的需要。但是，一些用户需要 JavaScript 的广泛灵活性。在这种情况下，可以将 JSX 编译成 Vapor 代码。
模板和 JSX 都经历了相同的中间表示的转换，最终编译成 Vapor 代码。
第 3 阶段：集成
Vue 旨在使 Vapor 可以无缝嵌入到您现有的应用程序中，而无需对您当前的设置进行任何修改。您可以灵活地在组件级别选择加入，从而逐步将其引入应用程序的子集或专门引入性能关键领域。
目标
对独立 Vapor 应用程序的工具支持
在现有应用程序中运行 Vapor 组件
在 Vapor 中运行 vDOM 组件
第 4 阶段：功能奇偶校验
在最初的版本中，Vapor Mode 将只提供基本的核心功能，而一些更辅助的功能，如 、 、 将在 Vue 团队整理完之前的所有目标后实现。<Transition /><KeepAlive /><Teleport />Suspense
总结
Vapor Mode 是 Vue.js 正在开发的一种新的面向性能的编译策略
它将使用相同的模板（假设你使用的是组合 API，并生成性能更高的输出。<script setup>
它将是可逐步采用的 - 您将能够选择为单个组件或整个应用程序启用蒸汽模式。
最终目标是在同一应用程序中自由混合 Vapor 和非 Vapor 组件而不会出现问题，但是，Vapor 模式可以从集成到 vDOM 中的纯 Vapor 树开始，然后从那里提高它们之间的互操作性。