大家好，这里是大家的林语冰。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 All we know about Vue 3's Vapor Mode...until now。
蒸汽模式是什么鬼物？
蒸汽模式（Vapor Mode）是一种新型替代编译策略，灵感来源于 Solid.js。它旨在优化您的 app 性能，这诉诸于将您的代码编译为更高效的 JS（JavaScript）输出。
当在 app 层级使用时，您可以完全消灭虚拟 DOM，从而优化您的 app 打包体积。
✅ 优势
- 更高性能
- 使用更少的内存
- 需要更少的运行时代码支持。
Solid.js 有一个和 Vue 雷同的响应性系统，它们都在响应式系统中使用了读取筑基的自动跟踪代理。这就是 Vue 可以实现与 Solid.js 类似的编译策略的原因。
蒸汽模式的工作机制
给定同款 .vue SFC（单文件组件），蒸汽模式能够将其编译为性能更高的 JS 输出。
为了优化最佳性能，蒸汽模式能且仅能支持一个 Vue 的功能子集，即全新的组合式 API 和诉诸 <script setup> 的 .vue SFC ------ Vue 3 编写 app 的默认新方法。请临幸关于 Vue 年度回顾 的扩展阅读。
目前的方法是什么？
目前，Vue 诉诸虚拟 DOM/编译器混合方法。编译器获取 SFC 的模板，分析它然后反馈给虚拟 DOM。
当通过一个微小的外边距执行 DOM 操作时，这种 编译器通知的虚拟 DOM 的方法允许 Vue 比诸如 Svelte 4 这样的无虚拟 DOM 工具更优秀。
蒸汽模式的用户指南
组件级别。
您可以诉诸 .vapor 文件后缀来启动它。
终极目标是在同款 app 中自由混用蒸汽和非蒸汽组件。
📝 * 注意事项
最初，蒸汽模式可能从集成到虚拟 DOM 的仅蒸汽树（vapor-only tree）开始，然后从那里优化它们的交互性。
在 app 层级。
以此方式编译的 app 可以完全消灭虚拟 DOM 运行时，并且只包含极其 轻量的 @vue/reactivity 和蒸汽模式运行时辅助。以此方式编写的 app 的基线大小 约为 6 kb，反观诉诸虚拟 DOM 的 Vue 3 app 的基线大小目前约为 50 kb。这同比减少了 88%！🤯
划重点
- 这是一个不会影响现存代码库的可选功能。 如果您决定将 Vue 升级到包含蒸汽模式的版本，这不会引入任何与蒸汽模式相关的破坏性更新。
- 蒸汽模式可以和虚拟 DOM 组件交互. 因此，如果您想使用任何诸如 Vuetify 这样使用虚拟 DOM 的库，蒸汽模式仍可以支持它。
蒸汽模式阶段
虽然仍在开发中，但我们有若干关于它的资讯：
第一阶段：核心功能的运行时
引入了所有蒸汽运行时辅助，这些辅助基本上是帮助生成代码的代码。此阶段基本码到功成了。
❇️ 目标
- 支持核心指令（
v-on, v-if, v-for, etc...）和组件树。 - 证明性能假说。
- 与现存 SSR 输出水合兼容。
第二阶段：核心功能的编译器
此处的关注点在于确保我们可以使用 Vue 模板或 JSX，并将其转换为运行时可以处理的东东。
❇️ 目标
- 共享代码生成 IR（Intermediate Representation，中间表示）
- JSX AST/模板AST - IR - 蒸汽模式代码
为什么是中间表示？
由于莫得虚拟 DOM，蒸汽模式的编译过程消除了手动创建渲染函数的需求。虽然但是，某些用户需要 JS 的广义灵活性。在这种情况下，可以将 JSX 编译成蒸汽代码。
模板和 JSX 都要转换为同款中间表示，这最终编译为蒸汽代码。
第三阶段：集成
Vue 旨在使蒸汽无缝衔接到您现存的 app 中，而无需对当前设置进行任何修改。
您可以灵活地选择在组件级别植入，从而使您能够将其循序渐进地引入到 app 的子集或特定的性能关键区域。
❇️ 目标
- 单独蒸汽 app 的工具支持
- 在现存 app 中运行蒸汽组件
- 在蒸汽中运行虚拟 DOM 组件
第四阶段：功能奇偶校验
在其初始版本中，蒸汽模式能且仅能提供必要的核心功能，而若干更辅助的功能，比如 <Transition />、<KeepAlive />、<Teleport />、Suspense 将在 Vue 团队整理出之前的所有目标后实现。
完结撒花
- 蒸汽模式是 Vue.js 开发中的一种面向性能的新型编译策略
- 它将使用同款模板 （假设您使用的是 Composition API 和
<script setup>），并生成性能更高的输出。 - 它可被渐进式采用 ------ 您将可以选择为单个组件或整个 app 启用蒸汽模式。
- **终极目标是在同款 app 中自由混用蒸汽和非蒸汽组件，**而不会出现任何问题，虽然但是，蒸汽模式可能从集成到虚拟 DOM 的仅蒸汽树开始，然后从那里优化它们的交互性。
您现在收看的是前端开发系列，学废了的小伙伴可以点赞友情赞助本系列，我们礼拜天佛系拖更，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~