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代码。

7a485c9807a043c90aa275a02f12ae07.png

为了达到最佳性能,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文件后缀来启用它。

7647df23cf1066adbda7c25c5880c802.png

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

f6a4dc04ebd3f17f7d56f03f72a53346.png

注意:

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

在应用级别。

51e7bf734e158dadcda983be83708fd2.png

通过这种方式编译的应用将能够完全抛弃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代码。

c43f3662280d30165ca6468e644cde8b.png

阶段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


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

关注我,加星标,明天见!

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

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

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

25438fd37577eedbef88c1a745c58041.png

以上,如果本文对你有所启发,欢迎点“85b26de6248102c0a4706f6b0d4fb71c.gif在看、点赞”支持下吧! 

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值