
热点 | Hot
尤雨溪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已经可以投入使用,但要求开发者自己对稳定性负责。他建议生产项目暂时不要上,新的、小的项目可以试水,真正要用起码要到年终(中?)。