今天,我們非常自豪地宣布 Vue.js 3.0 "One Piece" 發布。本次主版本更新包含性能的改進,更小的 bundle 體積,對 TypeScript 更好的支持,用於處理大規模用例的全新 API,以及為框架未來的長期迭代奠定了夯實的基礎。
3.0 的發布意味著兩年多以來的努力,其中包含 30+ RFC[1],2600+ commits,99 位貢獻者[2]所提交的 628 個 PR[3],還有許多除核心倉庫以外的開發及文檔編寫工作。在此對 Vue 團隊成員表示最深切的感謝,感謝貢獻者們提交的 PR,感謝贊助商和 sponsors[4] 的資金支持,感謝廣大社區成員參與預發布版本的設計與談論,並提供反饋。Vue 是一個獨立項目,為社區建立,也由社區維護,沒有大家的鼎立支持,Vue 3.0 是不可能實現的。
進一步推進 "漸進式框架" 概念Vue 從開始就有一個簡單的使命:成為任何人都能快速學習且平易近人的框架。隨著我們用戶群體的增長,框架的應用範圍也在不斷擴大,以適應不斷迭代的需求。隨著時間的流逝,它演變成了 "漸進式框架":一個可以逐步學習和採用的框架,同時為用戶提供持續支持,以應對越來越多的苛刻場景。
時至今日,我們在全球擁有 130 多萬的用戶,我們看到 Vue 被應用於各種不同的場景中的可能,從在傳統的服務端渲染頁面之上添加交互,到擁有數百個組件的完整單頁應用。Vue 3.0 將這種靈活性進一步提升。
分離內部模塊Vue 3.0 核心仍然通過一個簡單的 <script> 標籤來使用,但其內部結構已經被重寫,並解耦成一個個模塊的集合[5]。新的架構下為源碼提供了更好的可維護性,並允許終端用戶通過 tree-shaking 的形式將減少一半的運行時體積。
這些模塊還暴露了底層 API,解鎖了許多高級用法:
編譯器支持自定義 AST 轉換,用於在構建時自定義(如,在構建時進行 i18n 操作[6])
核心運行時提供了一系列 API,用於針對不同渲染目標(如 native moile[7]、WebGL[8] 或終端[9])的自定義容器。默認的 DOM 渲染器也使用這系列 API 構建。
`@vue/reactivity` 模塊[10]導出的功能,可以直接訪問 Vue 的響應式系統。並且可以作為一個獨立的包進行使用。它可以與其他模塊解決方案配對使用(如 lit-html[11]),甚至是在非 UI 場景中使用。
用於解決規模問題的全新 API在 Vue 3.0 中,基於對象的 2.x API 基本沒有變化,並引入了 Composition API[12] — 一套全新的 API,旨在解決 Vue 在大規模應用場景中的痛點。Composition API 構建於響應式 API 之上,實現了類似於 React hook 的邏輯組成與復用,相較於 2.x 基於對象的 API 方式來說,擁有更加靈活的代碼組織模式,以及更為可靠的類型推斷能力。
Composition API 同時還提供了適用於 Vue 2.x 的版本,可通過 `@vue/composition-api`[13] 插件來在項目中使用,目前已有適用於 Vue 2 和 Vue 3 的 Composition API 實用的工具庫(如 `vueuse`[14],`vue-composable`[15])。
性能提升Vue 3 與 Vue 2 相比,在 bundle 包大小方面(tree-shaking 減少了 41% 的體積),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及內存佔用方面(減少了 54%)都有著顯著的性能提升[16]。
在 3.0 中,我們採取了 「編譯信息虛擬 DOM」 的方式:針對模板編譯器進行了優化,並生成渲染函數代碼,以提升靜態內容的渲染性能,為綁定類型留下運行時提示,最為重要的是,模板內部的動態節點進行了扁平化處理,以減少運行時遍歷的開銷。因此,用戶可以獲得兩全其美的效果,從模板中獲得編譯器優化後的性能,或在需要時通過手動渲染函數直接控制。
改進與 TypeScript 的兼容Vue 3 的代碼庫完全採用 TypeScript 編寫,自動生成、測試並構建類型聲明,因此它們總為最新。Composition API 可以很好的進行類型推斷。Vetur,官方推出的 VSCode 插件,現已支持對模板表達式和 props 的類型檢查,同時,Vue 3 已全面支持 TSX[17]。
實驗特性我們為單文件組件提出了兩個新特性[18](SFC,又稱為 .vue 文件):
這些特性在 3.0 中均已實現且可用,但提供這些特性的目的只是為了收集反饋。在最終合併到 RFC 之前,這些特性仍是實驗性的。
我們還實現了一個目前尚未編寫文檔的 <Suspense> 組件,它允許在初始渲染或 branch 切換時,等待嵌套的異步依賴(異步組件或帶有 async setup() 組件)。我們正在與 Nuxt.js 團隊一起測試和迭代此功能(Nuxt 3 正在開發中[19]),並可能會在 3.1 時完善它。
分階段發布Vue 3.0 的發布意味著本框架的整體準備就緒。雖然框架的一些子項目還需進一步完善才能達到穩定狀態(特別是 router 以及 Vuex 與 devtools 的集成),但我們相信現在已經可以使用 Vue 3 開啟全新的項目。同時,我們也鼓勵庫作者開始升級項目以支持 Vue 3。
查閱 Vue 3 的庫指南[20],以了解框架所有子項目的詳細進展。
遷移與 IE11 的支持由於時間限制,我們推遲了遷移構建(v3 兼容 v2 的構建,以及遷移警告)和兼容 IE11 的計劃,並打算在 2020 年 Q4 集中進行。因此,計劃遷移現有 v2 應用或需要兼容 IE11 的用戶,目前應注意限制。
下一階段工作對於發布後的一段時間內,我們將重點關注:
目前,Vue 3 及其相關子項目的文檔站、github 分支以及 npm 的 dist 標籤都將保持在 next 狀態。這意味著 npm install vue 仍會安裝 2.x 版本,而通過 npm install vue@next 將會安裝 v3 版本。我們計劃在 2020 年底之前將所有文檔連結,分支以及 npm 標籤全部切為 3.0。
與此同時,我們已開始規劃 2.7 版本,這將會是 2.x 的最後一個小版本。2.7 將與 v3 進行兼容改進,並對使用 v3 中已刪除/更改的 API 發出警告,以更好的幫助 3.0 的遷移升級工作。我們計劃在 2021 年 Q1 進行 2.7 的工作,發布後將直接成為 LTS 版本,維護周期為 18 個月。
試用欲了解更多關於 Vue 3.0 的信息,請查閱全新的文檔站[21],如果你是 2.x 的老用戶,請直接查看遷移指南章節[22]。
參考資料[1] 30+ RFC: https://github.com/vuejs/rfcs/tree/master/active-rfcs