大家好,我是宝哥。
最近,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
最后,如果你觉得宝哥的分享还算实在,就给我点个赞,关注一波。分享出去,也许你的转发能给别人带来一点启发。
关注我,加星标,明天见!
关注下方宝哥微信,进宝哥副业交流群,
获取我公众号整理的所有资料,
包括前端电子书,面试资料,简历模板和副业资料等!
以上,如果本文对你有所启发,欢迎点“在看、点赞”支持下吧!