Vuejs 3.0 在北京時間2020年9月 19 日凌晨,終於發布了 3.0 版本,代號:One Piece
以下為 Vuejs Release 3.0 機器翻譯文章,原文 [v3.0.0 One Piece](https://github.com/vuejs/vue-next/releases/tag/v3.0.0)。
# Vue 3.0 發布
今天,我們很榮幸地宣布 Vue.js 3.0“One Piece”的正式發布。這個框架的新的主要版本提供了改進的性能、更小的捆綁大小、更好的 TypeScript 集成、用於處理大規模用例的新 API,以及為框架未來的長期迭代奠定了堅實的基礎。
3.0 版本代表了兩年多的開發努力,包括 [30+ RFC](https://github.com/vuejs/rfcs/tree/master/active-rfcs),2600 多個提交,[99 個貢獻者](https://github.com/vuejs/vue-next/graphs/contributors)的 [628 個 PR](https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview+),以及核心倉庫之外的大量開發和文檔工作。在此,我們要對我們的團隊成員、貢獻者的拉取請求、贊助商和支持者的資金支持,以及更廣泛的社區參與我們的設計討論並為預發布版本提供反饋表示最深切的感謝。Vue 是一個獨立的項目,是為社區而創建的,也是由社區來維持的,如果沒有您的一貫支持,Vue 3.0 是不可能實現的。
## 進一步推進“漸進式框架”概念。
Vue 從一開始就有一個簡單的使命:成為一個任何人都能快速學會的平易近人的框架。隨着我們用戶群的增長,框架的范圍也在不斷擴大,以適應不斷增長的需求。隨着時間的推移,它演變成了我們所說的“漸進式框架”:一個可以逐步學習和采用的框架,同時隨着用戶應對越來越多的需求場景而提供持續的支持。
今天,我們在全球擁有 130 多萬用戶 *,我們看到 Vue 被應用於各種不同的場景,從在傳統的服務器渲染的頁面上添加交互性,到擁有數百個組件的完整的單頁應用。Vue 3 將這種靈活性進一步提升。
## 分層內部模塊
Vue 3.0 核心仍然可以通過一個簡單的 `<script>` 標簽來使用,但它的內部結構已經被重新編寫成一個解耦模塊的集合。新的架構提供了更好的可維護性,並允許終端用戶通過 tree-shaking 減少多達一半的運行時大小。
這些模塊還暴露了底層的 API,解鎖了許多高級用例。
- 編譯器支持自定義 AST 轉換,用於構建時的自定義 (例如構建時的 i18n)。
- 核心運行時提供了一級的 API,用於創建針對不同渲染目標 (如[原生移動端](https://github.com/rigor789/nativescript-vue-next)、[WebGL](https://github.com/Planning-nl/vugel) 或[終端](https://github.com/ycmjason/vuminal)) 的自定義渲染器。默認的 DOM 渲染器也是使用相同的 API 構建的。
- [`@vue/reactivity` 模塊](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)導出的函數可以直接訪問 Vue 的反應性系統,並且可以作為一個獨立的包使用。它可以與其他模板解決方案 (如 [lit-html](https://github.com/yyx990803/vue-lit)) 配對使用,甚至在非 UI 場景中使用。
## 解決規模問題的新 API
在 Vue 3 中,基於對象的 2.x API 基本沒有變化。不過,3.0 還引入了 [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)——一套新的 API,旨在解決 Vue 在大規模應用中的使用痛點。組成 API 建立在反應性 API 之上,實現了類似於 React 鈎子的邏輯組成和重用,比 2.x 基於對象的 API 更靈活的代碼組織模式和更可靠的類型推理。
Composition API 也可以通過 [@vue/composition-api](https://github.com/vuejs/composition-api) 插件與 Vue 2.x 一起使用,目前已經有適用於 Vue 2 和 3 的組成 API 實用庫 (如 [vueuse](https://github.com/antfu/vueuse)、[vue-composable](https://github.com/pikax/vue-composable))。
### 性能改進
Vue 3 與 Vue 2 相比,在捆綁大小 (tree-shaking 時減少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和內存使用 (少了 54%) 方面都有[顯著的性能提升](https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing)。
在 Vue 3 中,我們采取了“compiler-informed 虛擬 DOM”的方法:模板編譯器執行積極的優化,並生成渲染函數代碼,以提升靜態內容,為綁定類型留下運行時提示,最重要的是,扁平化模板內的動態節點,以減少運行時遍歷的成本。因此,用戶可以獲得兩全其美的效果:從模板中獲得編譯器優化的性能,或者在用例需要時通過手動渲染函數直接控制。
### 改進的 TypeScript 集成
Vue 3 的代碼庫是用 TypeScript 編寫的,具有自動生成,測試和捆綁的類型定義,因此它們始終是最新的。Composition API 可以很好地處理類型推斷。Vetur 是我們的官方 VSCode 擴展,現在利用 Vue 3 改進的內部鍵入功能支持模板表達式和 props 類型檢查。哦,如果您願意,Vue 3 的打字完全支持 TSX。
### 實驗特性
我們為單文件組件 (SFC,即 `.vue` 文件) 提出了兩個新特性:
- [`<script setup>`:在 SFC 中使用 Composition API 的語法糖](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md)
- [`<style vars>`:單文件組件中狀態驅動 CSS 變量](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md)
這些功能已在 Vue 3.0 中實現並可用,但僅出於收集反饋的目的而提供。在 RFC 合並之前,它們將保持試驗狀態。
我們還實現了一個當前未公開的 `<Suspense>` 組件,該組件允許在初始渲染或分支開關上等待嵌套的異步依賴項 (異步組件或具有 `setup()` 的組件)。我們正在與 Nuxt.js 團隊一起測試和迭代此功能 ([Nuxt 3 即將發布](https://nuxtjs.slides.com/atinux/state-of-nuxt-2020)),並且很可能會在 3.1 版中將其固化。
## 分階段發布流程
Vue 3.0 的發布標志着該框架的全面就緒。盡管某些框架子項目可能仍需要進一步的工作才能達到穩定狀態 (特別是 devtools 中的路由器和 Vuex 集成),但我們認為今天使用 Vue 3 啟動新的綠色項目是合適的。我們還鼓勵圖書館作者開始升級您的項目以支持 Vue 3。
請查閱 [Vue 3 工具庫指南](https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries)以獲取有關所有框架子項目的詳細信息。
## 遷移和 IE11 支持
由於時間限制,我們已推遲了遷移版本 (具有 v2 兼容行為的 v3 版本 + 遷移警告) 和 IE11 版本,並計划在 2020 年第四季度重點關注它們。因此,計划遷移現有 v2 應用程序的用戶或要求 IE11 支持人員此時應意識到這些限制。
### 下一步
發布后的短期內,我們將專注於:
- 遷移版本
- IE11 支持
- 新 devtools 中的 Router 和 Vuex 集成
- Vetur 中模板類型推斷的進一步改進
目前,面向 Vue 3 和 v3 的項目的文檔網站,GitHub 分支和 npm dist 標簽將保持在下一個狀態。這意味着 `npm install vue` 仍將安裝 Vue 2.x,`npm install vue@next` 將安裝 Vue 3。**我們計划在 2020 年底之前將所有文檔鏈接,分支和 dist 標簽切換為默認值 3.0**。
同時,我們已經開始計划 2.7,這將是 2.x 發行版的最后一個計划的次要發行版。2.7 將向后移植來自 v3 的兼容改進,並發出有關 v3 中已刪除/更改的 API 使用情況的警告,以幫助潛在的遷移。我們計划在 2021 年第一季度開發 2.7,它將在發布后直接變為 LTS,預計有 18 個月的維護時長。
## 嘗試一下
要了解有關 Vue 3.0 的更多信息,請訪問我們的[新文檔網站](https://v3.vuejs.org/)。如果您是現有的 Vue 2.x 用戶,請直接轉到[遷移指南](https://v3.vuejs.org/guide/migration/introduction.html)。
- *根據 Google 報告的每周 Vue Devtools Chrome 擴展活躍用戶。
- (另外:[Vue 3 官方中文文檔倉庫](https://github.com/vuejs/docs-next-zh-cn)在這里)