![《架构师》2020年5月](https://wfqqreader-1252317822.image.myqcloud.com/cover/484/31716484/b_31716484.jpg)
热点 | 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配置,支持单文件组件。
官方库的支持状态:
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0007_0001.jpg?sign=1738843395-xMTG8XPV6DnrszHaDrSz8ybjj2WOh8SV-0-50790b704040fffa8ad485a91a343e72)
尤雨溪表示,Beta版本目前主要关注稳定性以及第三方库和工具的支持,如果你是第三方工具作者,现在就可以开始看Beta版本更新对自己带来的影响了。对普通用户来说,Beta版本将带来性能、Composition API、Tree-shaking支持、原生内置功能、TypeScript支持、自定义渲染等值得期待的特性。
性能:重写Virtual DOM,成倍提升
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0008_0001.jpg?sign=1738843395-F4msUHozeet45kkJBIk6hD0lt8u6qNcM-0-919ed41916a06d14530b8391c5f11f4a)
Vue以其渲染速度而闻名。在比较测试中,它的性能优于其他框架。尤雨溪在直播中指出,3.0 Beta版对Virtual DOM做了重写,带来了极大的速度提升。
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0008_0002.jpg?sign=1738843395-rMyS8uFSpBqUCSEfzV1xgV6iR0BB4b6p-0-65ae1182e4a4915262757d292a16444b)
Vue团队基于benchmark所做的测试表明,Beta版本更新性能提升了1.3到2倍,服务端渲染(SSR)速度提升2到3倍。但他同时指出,以上都是根据benchmark的实验数据得来,在实际的生产环境中肯定有所不同,以上性能提升仅供参考。
在直播过程中,尤雨溪还做了个小Demo演示Beta版本的一些有趣特性,此处不再赘述。
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0009_0001.jpg?sign=1738843395-RNMaU6mEdXEFDBSrERVgq3KJv0lF9EHt-0-117f9584a491adca1f64cccf091d1972)
Tree-shaking
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0009_0002.jpg?sign=1738843395-3WB2YW20OTfWeGxSBRAQ3j0vbjh8DnUC-0-d15d375f20eaaa6c8bd38737af159f97)
大多数的全局API和内部Vue辅助程序都会以ES模块导出的形式提供,因此能够实现摇树(tree-shakeable)优化(一种代码导入的优化技术,能够实现死代码消除,避免引入根本不会执行的代码)。另外,Vue 3编译器也会为模板生成摇树优化的代码。
在此之下,Vue的打包体积已经缩小到极致,纯净包体积13.5kb,所有运行时功能包含在内都只有22.5kb(比Vue 2功能更多,体积更小)。
Composition API
Composition API类似于React Hooks,提高了代码逻辑的可复用性,从而实现了与模板无关性,其响应式模块还可以和其他框架组合。
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0010_0001.jpg?sign=1738843395-HPnJ5hfYJVyT3uzMo28LiwsRrpeHj9R1-0-c083d42b7153b436e394005dc7c1a704)
Fragments
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0010_0002.jpg?sign=1738843395-aY9ZFX51kyqikf0e5qEsF7NuZxJAfDav-0-e33c4ff00271e9df27f31a8201717dad)
不再限制templates中只能有单一根节点,render函数也可以返回数组,可以更加专注于生产。
Teleport
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0010_0003.jpg?sign=1738843395-YcXrdr5iden7bwtOfrvWIXaWHuo23F2G-0-ab244d4d7825ba1d2854a3fbf9d59961)
本来打算叫Portal,对标React,因为Chrome的一项提案可能出现命名冲突,遂改名。
更好的TypeScript支持
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0011_0001.jpg?sign=1738843395-Qxz3yQgtTgHrWHVlOGTHkhor5L32Nsmr-0-6604f99f7d57a43c7046b75ef0a635d6)
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
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0012_0001.jpg?sign=1738843395-jSjMduUP02T5lHQUetfpHuvswRVgV88q-0-bd1eda47861f332cd45670d529f714cc)
Vue 3.0什么时候能投入项目使用
尤雨溪最后表示,目前的Vue 3.0 Beta已经可以投入使用,但要求开发者自己对稳定性负责。他建议生产项目暂时不要上,新的、小的项目可以试水,真正要用起码要到年终(中?)。