尤雨溪荷兰站:Vue11岁啦🎉

仔细看尤雨溪头上的帽子:

Void Zero是尤雨溪创办的新公司的名称,此次也是为了给自己公司背书。来看看 Vue11 年来所取得的成就吧:

  • 10k+ commis
  • 500+ releases
  • 2 million+ users worldwide
  • 250k+ GitHub Stars
  • ~6.4m weekly npm downloads
  • 1 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):

  • 作者为 VolorVue 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 的跑分进行特殊优化

VDOMVapor 可以互相混用:

  • 可以在虚拟 DOM 组件里嵌入无虚拟 DOM 组件,反之亦然
  • PropsSlots 都能完美通用
  • 除了某些边界情况(并非 100% 兼容)

正在开发中:水合(Hydration

  • 复用服务端渲染函数的代码
  • 基础功能已开发完毕
  • 但需要更多的微调测试

正在开发中:Transition组件

这个 edison1105 也是个国人,在南京工作:

涉猎很广啊:vue.netnodetypescript

Vapor 待开发的功能:

  • 异步组件
  • 其他内置组件(KeepAliveSuspense)

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 合作:

社区已经开干了:

往期精彩文章

相关推荐
开开心心就好3 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
Setsuna_F_Seiei5 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲7 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙7 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan8 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen8 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理9 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
+VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue旅游管理系统(源码+数据库+文档)
java·开发语言·vue.js·spring boot·课程设计
雪芽蓝域zzs10 小时前
第 7 章:双 Y 轴组合图(柱状 + 折线,看板高频场景)
vue.js·echars
IT_陈寒10 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端