Vue 3 将推出新特性，可以抛弃虚拟DOM了！

大家好，我是宝哥。

最近，Vue 3将推出一个新特性——Vapor Mode，它是一种受Solid.js启发的全新编译策略，旨在通过将代码编译成更高效的JavaScript输出来提升应用性能。

---

什么是Vapor Mode？

Vapor Mode是Vue 3中的一项创新特性，灵感来源于Solid.js。它通过将代码编译成更高效的JavaScript，来提升应用的性能。

使用Vapor Mode，你可以完全摒弃Virtual DOM，从而减少应用的打包体积。

🎉 好处

• 性能更优

• 内存使用更少

• 运行时支持代码更精简

Solid.js和Vue在响应式系统上非常相似，它们都使用基于读取的自动追踪的代理（Proxies）。这就是为什么Vue能够实现与Solid.js类似的编译策略。

Vapor Mode是如何工作的？

对于相同的.vue单文件组件，Vapor Mode能够将其编译成更高效的JavaScript代码。

为了达到最佳性能，Vapor Mode仅支持Vue的一部分特性，包括新的Composition API和带有<script setup>的.vue单文件组件，这是Vue 3编写应用的新标准方式。了解更多关于Vue年度回顾的信息。

目前的方法是什么？

目前，Vue采用混合的Virtual DOM/编译器方法。编译器分析SFC的模板，并将其输入到Virtual DOM。

这种编译器引导的Virtual DOM方法使得Vue在执行DOM操作时，性能略优于Svelte 4等无V-DOM工具。

如何使用Vapor Mode？

在组件级别。

你可以通过使用.vapor文件后缀来启用它。

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

注意：

最初，Vapor Mode可能首先以Vapor-only树集成到vDOM中，然后从那里开始提高它们之间的互操作性。

在应用级别。

通过这种方式编译的应用将能够完全抛弃Virtual DOM运行时，只包含@vue/reactivity和Vapor Mode运行时助手，这些助手非常轻量级。这样编写的应用的基线大小约为6kb，与当前带有vDOM的Vue 3应用的基线大小约50kb相比，减少了88%！🤯

关键点

• 这是一个可选功能，不会影响现有代码库。

如果你决定升级到包含Vapor Mode的Vue版本，这不会带来与Vapor Mode相关的任何破坏性变更。

• Vapor Mode将能够与vDOM组件互操作。

所以，如果你想使用任何使用Virtual DOM的库，比如Vuetify，Vapor Mode仍然能够支持它。

Vapor Mode的阶段

虽然仍在开发中，但我们有一些关于它的最新消息：

阶段1：核心特性的运行时

所有Vapor运行时助手都已引入，这些助手基本上是帮助生成代码的代码。这个阶段基本上已经完成。

❇️ 目标

• 支持核心指令（v-on, v-if, v-for等）和组件树。

• 验证性能假设。

• 与现有SSR输出的兼容性。

阶段2：核心特性的编译器

这里的主要焦点是确保我们可以将Vue模板或JSX转换成运行时可以处理的东西。

❇️ 目标

• 共享代码生成IR（中间表示）

• JSX AST / 模板AST - IR - Vapor Mode代码

为什么需要中间表示？

Vapor Mode的编译过程由于没有Virtual DOM，因此不需要手动创建渲染函数。然而，一些用户需要JavaScript的广泛灵活性。在这种情况下，可以将JSX编译成Vapor代码。

模板和JSX都经过转换到相同的中间表示，最终编译成Vapor代码。

阶段3：集成

Vue的目标是使Vapor能够无缝嵌入到现有的应用程序中，而不需要对当前设置进行任何修改。你可以选择在组件级别启用它，使你能够逐步将其引入到应用程序的子集或特定于性能关键区域。

❇️ 目标

• 独立Vapor应用的工具支持

• 在现有应用中运行Vapor组件

• 在Vapor中运行vDOM组件

阶段4：特性一致性

在最初发布时，Vapor Mode将只提供基本核心特性，而像<Transition />、<KeepAlive />、<Teleport />、Suspense等更辅助的特性将在Vue团队完成所有先前目标后实现。

总结

• Vapor Mode是由Vue.js开发的新的面向性能的编译策略

• 它将使用相同的模板（假设你使用的是Composition API和<script setup>），并产生更高效的输出。

• 它可以逐步采用 - 你可以选择为单个组件或整个应用启用Vapor Mode。

• 最终目标是在同一个应用中自由混合Vapor和非Vapor组件，尽管Vapor Mode可能首先以Vapor-only树集成到vDOM中，然后从那里开始提高它们之间的互操作性。

参考链接：

• https://icarusgk.hashnode.dev/vue-3-vapor-mode

• https://blog.vuejs.org/posts/2022-year-in-review

• https://youtu.be/OrT0tHGXyqE&t=1250

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注我，加星标，明天见！

关注下方宝哥微信，进宝哥副业交流群，

获取我公众号整理的所有资料，

包括前端电子书，面试资料，简历模板和副业资料等！

以上，如果本文对你有所启发，欢迎点“在看、点赞”支持下吧！