仔细看尤雨溪头上的帽子:
Void Zero
是尤雨溪创办的新公司的名称,此次也是为了给自己公司背书。来看看 Vue
这 11
年来所取得的成就吧:
10k+
commis500+
releases2 million+
users worldwide250k+
GitHub Stars~6.4m
weekly npm downloads1 billion+
monthly CDN requests on JSDelivr
而且这个趋势一直处于上涨状态:
Vue3.5
代号为:天元突破
:
- 响应式性能提升
-56%
的内存占用- 读取长数组最高可有
10
倍提升
props
响应式解构useTemplateRef
SSR
改善Lazy Hydration
useId
defineCustomElement
的改善
去年10
月份的 DevTools
:
接下来的 Vue3.6
:
- 用
Alien Signals
来继续优化响应式性能 - 无虚拟
DOM
模式 - 重构
defineComponent
的类型 - 用
Rolldown
+OXC
来打包
外星信号(Alien Signals
):
- 作者为
Volor
和Vue Language Tools
的作者 - 始于
Volor
自用实验 - 性能超过已知所有
Signals
库(响应式库)
在跑分列表中位列第一:
这还没完,它的跑分还在随着版本的迭代越来越牛:
这里尤雨溪贴了一张原作者的推文:
翻译:我们刚刚发布了
0.6.0
(直接跳过了0.5.0
)相比0.4.8
而言提升了13.4%
的性能并减少了3.4%
的内存占用。
接下来就是和 Vue3.4
的对比:
1.0
已合并至 Vue3.6
分支:
紧接着便开始介绍起了无虚拟 DOM
模式:
为不熟悉这个模式的人简介下:
- 同样的代码 不同的编译结果
- 同样的
API
更快的性能 更少的内存占用 - 接近
Solid.js
的性能 - 与现有代码兼容(可以与虚拟
DOM
进行混用)
同样的代码编译成虚拟 DOM
:
同样的代码编译成无虚拟 DOM
:
可以看到代码明显少了许多。接下来就是从Vue1到Vue3.6:
推荐阅读:《尤雨溪:从Vue1到Vue3.6》
- 懒计算
props
/slots
- 挂载
10
万个组件仅需100
毫秒
在虚拟 DOM
模式和 Vapor
模式里最大程度的复用了 runtime-core
的代码以减少两者共存时的代码体积:
- 共享组件实例类型
- 复用生命周期、代码报错、
provide
/inject
等逻辑 - 在虚拟
DOM
项目里使用Vapor
模式仅增加约3.5kb
的代码体积
Vapor
模式的性能和 Solid
以及 Svelte5
在同一水平上:
- 测试结果基于正在开发中的
Vapor
分支(未发布正式版) - 没有针对
benchmark
的跑分进行特殊优化
VDOM
与 Vapor
可以互相混用:
- 可以在虚拟
DOM
组件里嵌入无虚拟DOM
组件,反之亦然 Props
和Slots
都能完美通用- 除了某些边界情况(并非
100%
兼容)
正在开发中:水合(Hydration
)
- 复用服务端渲染函数的代码
- 基础功能已开发完毕
- 但需要更多的微调测试
正在开发中:Transition
组件
- 由@edison1105开发
- 支持
v-if
/v-show
/mode
这个 edison1105 也是个国人,在南京工作:
涉猎很广啊:vue
、.net
、node
、typescript
Vapor
待开发的功能:
- 异步组件
- 其他内置组件(
KeepAlive
,Suspense
)
3.6
就能用 Vapor
模式了:
- 但还是实验性质的(并非正式版)
- 可以通过
<script vapor>
来写无虚拟DOM
组件 - 可以通过
createVaporApp
来开启纯Vapor
模式 - 暂不支持但以后会支持:
<KeepAlive>
<Suspense>
Vue
源码现在是由 Rolldowm
+ OXC
来打包的,速度有着惊人的提升:
Vue版本 | 打包工具 | 时间 |
---|---|---|
3.2 | Rollup + rollup-plugin-typescript2 + terser | 114秒(慢102倍) |
3.5 | Rollup + rollup-plugin-typescript2 + swc | 8.52秒(慢7.6倍) |
3.6 | Rolldown + oxc-transform | 1.11秒 |
Vue Language Tools 3.0:
Vue + Lynx = Vue Native?
Lynx
团队表示愿意与 Vue
合作:
社区已经开干了: