尤雨溪 B 站直播，Vue 3.0 Beta 是一个值得体验的全新版本

会员服务 ·

尤雨溪 B 站直播，Vue 3.0 Beta 是一个值得体验的全新版本

2020 年 4 月 23 日 InfoQ

作者丨小智

4 月 21 日，在由前端圈组织发起的 B 站直播中，尤雨溪远程连线，分享了 Vue 3.0 Beta 版本的那些变化。本文是对其分享的简单总结。

Vue 3.0 Beta 来了！

4 月 17 日，Vue.js 作者尤雨溪宣布 Vue 3.0 正式进入 Beta 版本，GitHub 地址：

https://github.com/vuejs/vue-next#status-beta

Beta 阶段的主要进度有：

已合并所有计划内的 RFC；
已实现所有被合并的 RFC；
Vue CLI 通过 vue-cli-plugin-vue-next 提供实验性支持；
提供了一个用于 Vue 3 的最小化 webpack 配置，支持单文件组件。

官方库的支持状态：

尤雨溪表示，Beta 版本目前主要关注稳定性以及第三方库和工具的支持，如果你是第三方工具作者，现在就可以开始看 Beta 版本更新对自己带来的影响了。对普通用户来说，Beta 版本将带来性能、Composition API、Tree-shaking 支持、原生内置功能、TypeScript 支持、自定义渲染等值得期待的特性。

性能：重写 Virtual DOM，成倍提升

Vue 以其渲染速度而闻名。在比较测试中，它的性能优于其他框架。尤雨溪在直播中指出，3.0 Beta 版对 Virtual DOM 做了重写，带来了极大的速度提升。

Vue 团队基于 benchmark 所做的测试表明，Beta 版本更新性能提升了 1.3 到 2 倍，服务端渲染（SSR）速度提升 2 到 3 倍。但他同时指出，以上都是根据 benchmark 的实验数据得来，在实际的生产环境中肯定有所不同，以上性能提升仅供参考。

在直播过程中，尤雨溪还做了个小 Demo 演示 Beta 版本的一些有趣特性，此处不再赘述。

Tree-shaking

大多数的全局 API 和内部 Vue 辅助程序都会以 ES 模块导出的形式提供，因此能够实现摇树（tree-shakeable）优化（一种代码导入的优化技术，能够实现死代码消除，避免引入根本不会执行的代码）。另外，Vue 3 编译器也会为模板生成摇树优化的代码。

在此之下，Vue 的打包体积已经缩小到极致，纯净包体积 13.5kb，所有运行时功能包含在内都只有 22.5kb（比 Vue 2 功能更多，体积更小）。

Composition API

Composition API 类似于 React Hooks，提高了代码逻辑的可复用性，从而实现了与模板无关性，其响应式模块还可以和其他框架组合。

Fragments

不再限制 templates 中只能有单一根节点，render 函数也可以返回数组，可以更加专注于生产。

Teleport

本来打算叫 Portal，对标 React，因为 Chrome 的一项提案可能出现命名冲突，遂改名。

更好的 TypeScript 支持

Vue 3.0 用 TypeScript 做了重写，尤雨溪表示开发者不管是用 JS 还是 TS 都可以。在 Vue 3 内部使用 TypeScript 能够让开发人员从 Vue 的 TypeScript 定义中收益，同时还得到现代 IDE 的常见代码支持，如 Visual Studio Code / WebStorm。其次，即便不用 TypeScript，普通的 JavaScript 用户也能受益于现代 IDE 的代码智能特性。另外，尤雨溪认为 TypeScript 的 Vue 代码其实 90% 都是 JavaScript，因为 Vue 类型定义只允许开发人员在其代码的很少一部分上添加标注。

未竟之事