4 月 21 日，在由前端圈組織發(fā)起的 B 站直播中，尤雨溪遠(yuǎn)程連線，分享了 Vue 3.0 Beta 版本的那些變化。本文是對(duì)其分享的簡(jiǎn)單總結(jié)。 Vue 3.0 Beta 來(lái)了！4 月 17 日，Vue.js 作者尤雨溪宣布 Vue 3.0 正式進(jìn)入 Beta 階段。

Beta 階段的主要進(jìn)度有：

• 已合并所有計(jì)劃內(nèi)的 RFC；
• 已實(shí)現(xiàn)所有被合并的 RFC；
• Vue CLI 通過(guò) vue-cli-plugin-vue-next 提供實(shí)驗(yàn)性支持；
• 提供了一個(gè)用于 Vue 3 的最小化 webpack 配置，支持單文件組件。

官方庫(kù)的支持狀態(tài)：

尤雨溪表示，Beta 版本目前主要關(guān)注穩(wěn)定性以及第三方庫(kù)和工具的支持，如果你是第三方工具作者，現(xiàn)在就可以開始看 Beta 版本更新對(duì)自己帶來(lái)的影響了。對(duì)普通用戶來(lái)說(shuō)，Beta 版本將帶來(lái)性能、Composition API、Tree-shaking 支持、原生內(nèi)置功能、TypeScript 支持、自定義渲染等值得期待的特性。

性能：重寫 Virtual DOM，成倍提升

Vue 以其渲染速度而聞名。在比較測(cè)試中，它的性能優(yōu)于其他框架。尤雨溪在直播中指出，3.0 Beta 版對(duì) Virtual DOM 做了重寫，帶來(lái)了極大的速度提升。

Vue 團(tuán)隊(duì)基于 benchmark 所做的測(cè)試表明，Beta 版本更新性能提升了 1.3 到 2 倍，服務(wù)端渲染（SSR）速度提升 2 到 3 倍。但他同時(shí)指出，以上都是根據(jù) benchmark 的實(shí)驗(yàn)數(shù)據(jù)得來(lái)，在實(shí)際的生產(chǎn)環(huán)境中肯定有所不同，以上性能提升僅供參考。

在直播過(guò)程中，尤雨溪還做了個(gè)小 Demo 演示 Beta 版本的一些有趣特性，此處不再贅述。

Tree-shaking

大多數(shù)的全局 API 和內(nèi)部 Vue 輔助程序都會(huì)以 ES 模塊導(dǎo)出的形式提供，因此能夠?qū)崿F(xiàn)搖樹（tree-shakeable）優(yōu)化（一種代碼導(dǎo)入的優(yōu)化技術(shù)，能夠?qū)崿F(xiàn)死代碼消除，避免引入根本不會(huì)執(zhí)行的代碼）。另外，Vue 3 編譯器也會(huì)為模板生成搖樹優(yōu)化的代碼。

在此之下，Vue 的打包體積已經(jīng)縮小到極致，純凈包體積 13.5kb，所有運(yùn)行時(shí)功能包含在內(nèi)都只有 22.5kb（比 Vue 2 功能更多，體積更小）。

Composition API

Composition API 類似于 React Hooks，提高了代碼邏輯的可復(fù)用性，從而實(shí)現(xiàn)了與模板無(wú)關(guān)性，其響應(yīng)式模塊還可以和其他框架組合。

Fragments

不再限制 templates 中只能有單一根節(jié)點(diǎn)，render 函數(shù)也可以返回?cái)?shù)組，可以更加專注于生產(chǎn)。

Teleport

本來(lái)打算叫 Portal，對(duì)標(biāo) React，因?yàn)?Chrome 的一項(xiàng)提案可能出現(xiàn)命名沖突，遂改名。

更好的 TypeScript 支持

Vue 3.0 用 TypeScript 做了重寫，尤雨溪表示開發(fā)者不管是用 JS 還是 TS 都可以。在 Vue 3 內(nèi)部使用 TypeScript 能夠讓開發(fā)人員從 Vue 的 TypeScript 定義中收益，同時(shí)還得到現(xiàn)代 IDE 的常見代碼支持，如 Visual Studio Code / WebStorm。其次，即便不用 TypeScript，普通的 JavaScript 用戶也能受益于現(xiàn)代 IDE 的代碼智能特性。另外，尤雨溪認(rèn)為 TypeScript 的 Vue 代碼其實(shí) 90% 都是 JavaScript，因?yàn)?Vue 類型定義只允許開發(fā)人員在其代碼的很少一部分上添加標(biāo)注。

未竟之事

• 文檔、升級(jí)指南；
• Vuex 以兼容為重點(diǎn)，API 沒(méi)有大改動(dòng)；
• Router 有一些相關(guān) API 改動(dòng)；
• CLI：插件；
• 開發(fā)工具支持；
• IDE 支持；
• ……

2.x 版本還會(huì)有最后一個(gè) release

Vue 3.0 什么時(shí)候能投入項(xiàng)目使用

尤雨溪最后表示，目前的 Vue 3.0 Beta 已經(jīng)可以投入使用，但要求開發(fā)者自己對(duì)穩(wěn)定性負(fù)責(zé)。他建議生產(chǎn)項(xiàng)目暫時(shí)不要上，新的、小的項(xiàng)目可以試水，真正要用起碼要到年終（中？）。

關(guān)注我并轉(zhuǎn)發(fā)此篇文章，私信我“領(lǐng)取資料”，即可免費(fèi)獲得InfoQ價(jià)值4999元迷你書！