![《架构师》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=1739531069-8rLT7AovpdR9FdpGSy4vBm0dasKByyDP-0-1ac77dec58334a605f50509b9ff20df9)
尤雨溪表示,Beta版本目前主要关注稳定性以及第三方库和工具的支持,如果你是第三方工具作者,现在就可以开始看Beta版本更新对自己带来的影响了。对普通用户来说,Beta版本将带来性能、Composition API、Tree-shaking支持、原生内置功能、TypeScript支持、自定义渲染等值得期待的特性。
性能:重写Virtual DOM,成倍提升
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0008_0001.jpg?sign=1739531069-P5VMXDiRWsKeG1MCD7E6y7iAjN1gNilq-0-f5e8a824102ce4887868319357b962bc)
Vue以其渲染速度而闻名。在比较测试中,它的性能优于其他框架。尤雨溪在直播中指出,3.0 Beta版对Virtual DOM做了重写,带来了极大的速度提升。
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0008_0002.jpg?sign=1739531069-AiHvsFXhDp1aKHPfcpHqICj8OVNKOH9l-0-f1782f7c9e0dbf4fba4fd6d451ce72a0)
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=1739531069-oDIYYktq0KYck61H4WwiZPBn7gcLMLYN-0-74c444c2723fbcc152dce0809ba488c5)
Tree-shaking
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0009_0002.jpg?sign=1739531069-01uEtpZtT7c3WWKbiiwwFN9fevmP8gta-0-2585e3a5284e4b056a6dece679da1df3)
大多数的全局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=1739531069-0IFnxS9ZfMnvpY7SKEw8YqPTvfofUVww-0-022f5886049cd0cb557a799f3fe799bf)
Fragments
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0010_0002.jpg?sign=1739531069-NzhLAsK4GVsIkKqllyALsXIBUurNOWmF-0-dc16317e880a2b85e067ce6c5dffbee1)
不再限制templates中只能有单一根节点,render函数也可以返回数组,可以更加专注于生产。
Teleport
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0010_0003.jpg?sign=1739531069-FRdps84aFY0irnjR7rVp4cmNmsi71OOR-0-51b6ffc5aca652d4df3e463f1999efc5)
本来打算叫Portal,对标React,因为Chrome的一项提案可能出现命名冲突,遂改名。
更好的TypeScript支持
![](https://epubservercos.yuewen.com/071557/17173229405109906/epubprivate/OEBPS/Images/figure_0011_0001.jpg?sign=1739531069-cIkO87RI8JfqJ6zBWAONVNXZAuibm8b0-0-e8c7283f0a1268bb700552b6e7e1a880)
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=1739531069-KU5lpljr4uWcSfekTRrN7XGloT65LnEu-0-131d733d66a3ad58216725d99503bfbc)
Vue 3.0什么时候能投入项目使用
尤雨溪最后表示,目前的Vue 3.0 Beta已经可以投入使用,但要求开发者自己对稳定性负责。他建议生产项目暂时不要上,新的、小的项目可以试水,真正要用起码要到年终(中?)。