今年年初，尤雨溪在 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 模式是受 Solid.js 启发的一种新的替代编译策略。它旨在通过将代码编译为更高效的 JavaScript 输出来增强应用的性能。
当在应用级别使用时，可以完全删除虚拟 DOM，从而减少应用的包大小。
✅ 使用 Vapor Mode 的好处如下：
Solid.js 具有与 Vue 非常相似的响应式系统，它们都在其响应式系统中使用代理，并具有基于读取的自动跟踪。这就是为什么 Vue 可以实现与 Solid.js 类似的编译策略。
给定相同的 .vue 单文件组件，Vapor Mode 能够将其编译为性能更高的 JavaScript 输出。
为了实现最佳性能，Vapor Mode 仅支持 Vue 功能的一个子集，包括新的 Composition API 和带有＜script setup＞的.vue单文件组件（SFC），这些是 Vue 3 的新默认应用编写方式。
目前，Vue 采用混合 VDOM/编译器方法。编译器获取 SFC 的模板，对其进行分析并将其提供给虚拟 DOM。
这种编译器通知的虚拟 DOM 方法使 Vue 在执行 DOM 操作时比 Svelte 4 等无 V-DOM 工具表现得更好。
可以使用 .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 运行时相关的帮助生成代码的辅助程序。这个阶段已经基本完成。
❇️ 阶段目标：
这一阶段的主要重点是确保可以使用 Vue 模板或 JSX 并将其转换为运行时可以处理的内容。
❇️ 阶段目标：
那为什么需要中间表示呢？
由于没有虚拟 DOM，Vapor Mode 的编译过程无需手动创建渲染函数。然而，一些用户需要 JavaScript 的广泛灵活性。在这种情况下，可以将 JSX 编译为 Vapor 代码。
模板和 JSX 都经过转换为相同的中间表示，最终编译为 Vapor 代码。
Vue 的目标是让 Vapor 能够无缝地融入现有的应用，而无需对当前的设置进行任何修改。可以在组件级别进行选择，以便能够逐步将其引入到应用的一部分中，或者特别是在性能关键的区域中使用。这样，可以根据需要灵活地利用 Vapor，并在需要时将其引入到现有的应用程序中。
❇️ 阶段目标：
在首次发布时，Vapor Mode 将仅提供基本的核心功能，而诸如<Transition />、<KeepAlive />、<Teleport />、Suspense 等辅助功能将在 Vue 团队完成前述目标后进行实现。
本文链接：http://www.28at.com/showinfo-26-20060-0.html即将到来的 Vue 3 “Vapor Mode”
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
