仔细看尤雨溪头上的帽子:
Void Zero是尤雨溪创办的新公司的名称,此次也是为了给自己公司背书。来看看 Vue 这 11 年来所取得的成就吧:
10k+commis500+releases2 million+users worldwide250k+GitHub Stars~6.4mweekly npm downloads1 billion+monthly CDN requests on JSDelivr
而且这个趋势一直处于上涨状态:
Vue3.5 代号为:天元突破:
- 响应式性能提升
-56%的内存占用- 读取长数组最高可有
10倍提升
props响应式解构useTemplateRefSSR改善Lazy HydrationuseId
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 合作:
社区已经开干了: