技術文章 » 你期待已久的Vue 3 正式釋出啦！

你期待已久的Vue 3 正式釋出啦！

2020-09-21 13:00:14

Vue.js 3.0 "One Piece" 已正式釋出，此框架新的主要版本提供了更好的效能、更小的捆綁包體積、更好的 TypeScript 整合、用於處理大規模用例的新 API，併為框架未來的長期迭代奠定了堅實的基礎。

3.0 版本的開發週期長達兩年多，期間產生了 30+ RFCs、2600+ commits、628 pull requests，以及核心倉庫之外的大量開發和檔案工作。

Vue 3.0 的釋出標誌著此框架整體上已處於可用狀態。儘管框架的某些子專案可能仍需要進一步的開發才能達到穩定狀態（特別是 devtools 中的路由和 Vuex 整合），不過現在仍然是開始使用 Vue 3 啟動新專案的合適時機。官方還鼓勵庫作者現在可以開始升級專案以支援 Vue 3。查閱《Vue 3 Libraries Guide》以獲取有關所有框架子專案的詳細資訊。

分層內部模組 (Layered internal modules)

Vue 3.0 core 仍然可以通過<script>標籤進行使用，但其內部架構已被徹底重寫為一組解耦的模組。新架構提供了更好的可維護性，並允許使用者通過 tree-shaking 來減少多達一半的 runtime 大小。

這些模組還將許多底層 API 暴露出來，可用於許多高階用例：

  • 編譯器為客製化 build-time 提供了對自定義 AST 轉換的支援（例如 build-time i18n）
  • 核心 runtime 提供了優先順序最高的 API，用於建立針對不同渲染目標（例如原生移動裝置、WebGL 或終端）的自定義渲染器。預設 DOM 渲染器使用相同的 API 構建
  • @vue/reactivity模組匯出的函數可以直接存取 Vue 的 reactivity 系統，其本身也可以作為一個獨立的程式包使用。它還可以與其他模板解決方案（例如 vue-lit）搭配使用，甚至可以在非 UI 場景中使用

用於處理大規模用例的新 API

在 Vue 3 中，基於物件的 2.x API 基本沒有變化。不過 3.0 還引入了 Composition API，旨在解決 Vue 在大型應用程式中的使用痛點。Composition API 構建於 reactivity API 之上，可以實現類似於 React 勾點(React hooks)的邏輯組合和重用，與 2.x 基於物件的 API 相比，擁有更靈活的程式碼組織模式和更可靠的型別推導。

通過 @vue/composition-api 外掛，Composition API 還可以與 Vue 2.x 搭配使用，並且目前已經有適用於 Vue 2 和 3 的 Composition API 實用程式庫（例如 vueuse，vue-composable）。

提升效能

與 Vue 2 相比，Vue 3 在捆綁包體積（通過 tree-shaking 減小約 41% 大小）、初始渲染（速度提升約 55%）、更新（速度提升約 133%）和記憶體使用率（降低約 54%）等方面有了顯著的效能提升。

Vue 3 採用了"compiler-informed Virtual DOM"的方法：模板編譯器執行激進的優化並生成渲染函數程式碼，以提升靜態內容存取速度，為繫結型別留下 runtime 提示。最重要的是，將內部的動態節點扁平化處理，以降低 runtime 遍歷的成本。因此，使用者可以獲得兩全其美的效果：通過模板優化編譯器的效能，或者在用例需要時通過手動渲染函數直接控制。

改進與 TypeScript 的整合

Vue 3 使用 TypeScript 編寫，具有自動生成、測試和捆綁的型別定義等特性。Composition API 可與型別推導很好地搭配使用。Vetur，Vue 3 的官方 VSCode 擴充套件，現在支援模板表示式，以及利用 Vue 3 改進的內部型別進行 props 型別檢查。

實驗性功能

為單檔案元件(SFC, Singe-File Components)，即 .vue 檔案提供了兩項新特性：

  • <script setup>:用於在 SFC 中使用 Composition API 的語法糖
  • <style vars>: SFC 中狀態驅動的 CSS 變數

上述已在 Vue 3.0 中實現並可用，但僅出於收集反饋的目的而提供。在合併 RFC 之前，它們將保持實驗性狀態。

此外還實現了一個當前未記錄的元件，該元件允許在初始渲染或分支切換時等待巢狀的非同步依賴項（非同步元件或包含async setup()的元件）。目前正在與 Nuxt.js 團隊一起測試和迭代此功能（即將在 Nuxt 3釋出），並且可能會在 3.1 中到達穩定。

下一步

釋出後的短期內，開發團隊將專注於：

  • 版本遷移
  • 支援 IE11
  • 新 devtools 中的路由和 Vuex 整合
  • 對 Vetur 中模板型別推導的進一步改進

目前，Vue 3 和 v3-targeting 專案的檔案網站、GitHub 分支和 npm dist 標籤將保持 next-denoted 狀態。這意味著使用npm install vue命令仍會安裝 Vue 2.x，而要安裝 Vue 3 需使用npm install vue@next命令。官方計劃在 2020 年底前將所有的 doc 連結、分支和 dist 標籤都切換為預設 3.0。

同時，團隊已開始啟動 2.7 的開發工作計劃，這將是 2.x 的最後一個次要版本。2.7 將向後移植來自 v3 的相容改進，並會提示有關 v3 中已刪除/更改的 API 使用情況的警告。團隊表示計劃在 2021 年第一季度開發 2.7，釋出後將直接變為 LTS 版本，具有 18 個月的維護週期。

使用

瞭解有關 Vue 3.0 的更多資訊，存取新檔案網站。如果是 Vue 2.x 使用者，存取遷移指南。

詳情檢視: https://github.com/vuejs/vue-next/releases/tag/v3.0.0