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