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

作者 小智

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

Vue 3.0 Beta来了！

4月17日，Vue.js作者尤雨溪宣布Vue 3.0正式进入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类型定义只允许开发人员在其代码的很少一部分上添加标注。

未竟之事

• 文档、升级指南；

• Vuex以兼容为重点，API没有大改动；

• Router有一些相关API改动；

• CLI：插件；

• 开发工具支持；

• IDE支持；

• ……

2.x版本还会有最后一个release

Vue 3.0什么时候能投入项目使用

尤雨溪最后表示，目前的Vue 3.0 Beta已经可以投入使用，但要求开发者自己对稳定性负责。他建议生产项目暂时不要上，新的、小的项目可以试水，真正要用起码要到年终（中？）。