官方回应无虚拟DOM版Vue为什么叫Vapor

相信很多人和我一样,好奇无虚拟DOM版的Vue为什么叫Vue Vapor。之前看过一个很新颖的观点:Vue1时代就没有虚拟DOM,而那个时代恰好处于前端界的第一次工业革命,也就是以声明式代替命令式的写法。所以无虚拟DOM版Vue让人感觉梦回Vue1,于是就采取了Vapor这个名字。

Vapor是蒸汽的意思,第一次工业革命开创了以机器代替手工劳动的时代,该革命以蒸汽机作为动力机被广泛使用为标志。

不过这个说法并非来自官方,虽然乍一听还挺有道理的,但总感觉官方并不一定是这么想的。事实也的确如此,在官方的Vue Conf中,Vue Vapor的作者出面说明了Vapor这个名字的含义:

由于无虚拟DOM的特性,纯Vapor模式下可以去掉很多代码,比如VDom Diff。所以Vue Vapor的包体积可以做的更加的轻量化,像水蒸气一样轻。

(前面那段话是官方说的,这段话是我说的)当然不是说Vapor模式就不需要diff算法了,我看过同为无虚拟DOM框架的SvelteSolid源码,无虚拟DOM只是不需要vDom间的Diff算法了,列表之间还是需要diff的。毕竟再怎么编译,你从后端获取到的数组,编译器也不可能预测得到。

那具体能轻量多少呢?官方给出的数据是比虚拟DOMVue33.6%

Vapor的名字除了想表示轻量化之外还有一个另外一个原因,那就是Solid。可能有人会说这关Solid什么事啊?实际上Vapor的灵感正是来自于Solid(尤雨溪亲口承认)而Solid代表固体:

为了跟Solid有个趣味联动,那无虚拟DOM就是气体好了:

以上就是Vue Vapor作者告诉大家为什么叫Vapor的两大原因。

性能

之前都说虚拟DOM是为了性能,怎么现在又反向宣传了?无虚拟DOM怎么又逆流而上成为了性能的标杆了呢?这个话题我们留到下一篇文章去讲,本篇文章我们只看数据:

从左到右依次为:

  • 原生JS:1.01
  • Solid:1.09
  • Svelte:1.11
  • 无虚拟DOMVue:1.24
  • 虚拟DOMVue:1.32
  • React:1.55

数字越小代表性能越高,但无论再怎么高都不可能高的过手动优化过的原生JS,毕竟无论什么框架最终打包编译出来的还是JS。不过框架的性能其实已经挺接近原生的了,尤其是以无虚拟DOM著称的SolidSvelte。但无虚拟DOMVue和虚拟DOMVue之间并没有拉开什么很大的差距,1.241.32这两个数字证明了其实二者的性能差距并不明显,这又是怎么一回事呢?

一个原因是Vue3本来就做了许多编译优化,包括但不限于静态提升、大段静态片段将采用innerHTML渲染、编译时打标记以帮助虚拟DOM走捷径等... 由于本来的性能就已经不错了,所以可提升的空间自然也没多少。

看完上述原因肯定有人会说:可提升的空间没多少可以理解,那为什么还比同为无虚拟DOMSolidSvelte差那么多?如果VaporSolid性能差不多的话,那可提升空间小倒是说得过去。但要是像现在这样差的还挺多的话,那这个理由是不是就有点站不住脚了?之所以会出现这样的情况是因为Vue Vapor的作者在性能优化和快速实现之间选择了后者,毕竟尤雨溪第一次公布要开始做无虚拟DOMVue的时间是在2020年:

而如今已经是2025年了。也就是说如果一个大一新生第一次满心欢喜的听到无虚拟DOMVue的消息后,那么他现在大概率已经开始毕业工作了都没能等到无虚拟DOMVue的发布。这个时间拖的有点太长了,甚至从Vue2Vue3都没用这么久。

所以现在的首要目标是先实现出来一版能用的,后面再慢慢进行优化。我们工作不也是这样么?先优先把功能做出来,优化的事以后再说。那么具体该怎么优化呢:

现在的很多渲染逻辑继承自原版Vue3,但无虚拟DOMVue可以采用更优的渲染逻辑。而且现在的Vapor是跟着原版Vue的测试集来做的,这也是为了实现和原版Vue一样的行为。但这可能并不是最优解,之后会慢慢去掉一些不必要的功能,尤其是对性能产生较大影响的功能。

往期精彩文章:

《尤雨溪:从Vue1到Vue3.6》

相关推荐
Lethehong3 分钟前
简历优化大师:基于React与AI技术的智能简历优化系统开发实践
前端·人工智能·react.js·kimi k2·蓝耘元生代·蓝耘maas
华仔啊11 分钟前
还在用 WebSocket 做实时通信?SSE 可能更简单
前端·javascript
鹏北海33 分钟前
多标签页登录状态同步:一个简单而有效的解决方案
前端·面试·架构
_AaronWong37 分钟前
基于 Vue 3 的屏幕音频捕获实现:从原理到实践
前端·vue.js·音视频开发
孟祥_成都1 小时前
深入 Nestjs 底层概念(1):依赖注入和面向切面编程 AOP
前端·node.js·nestjs
let_code1 小时前
CopilotKit-丝滑连接agent和应用-理论篇
前端·agent·ai编程
Apifox1 小时前
Apifox 11 月更新|AI 生成测试用例能力持续升级、JSON Body 自动补全、支持为响应组件添加描述和 Header
前端·后端·测试
木易士心1 小时前
深入剖析:按下 F5 后,浏览器前端究竟发生了什么?
前端·javascript
在掘金801101 小时前
vue3中使用medium-zoom
前端·vue.js
xump2 小时前
如何在DevTools选中调试一个实时交互才能显示的元素样式
前端·javascript·css