【官宣】Vue 3.0 發(fā)布!
Vue 團(tuán)隊(duì)于 2020 年 9 月 18 日晚 11 點(diǎn)半發(fā)布了 Vue 3.0 版本,我們連夜對(duì) Release 進(jìn)行了翻譯。由于時(shí)間倉促,文中如有翻譯不當(dāng)?shù)牡胤竭€望提出。如有侵權(quán),請聯(lián)系刪帖。以下為譯文正文。
原文:https://github.com/vuejs/vue-next/releases
作者:Vue 團(tuán)隊(duì)
譯文:https://zhuanlan.zhihu.com/p/254219538
譯者:QC-L
今天,我們非常自豪地宣布 Vue.js 3.0 "One Piece" 發(fā)布。本次主版本更新包含性能的改進(jìn),更小的 bundle 體積,對(duì) TypeScript 更好的支持,用于處理大規(guī)模用例的全新 API,以及為框架未來的長期迭代奠定了夯實(shí)的基礎(chǔ)。
3.0 的發(fā)布意味著兩年多以來的努力,其中包含 30+ RFC[1],2600+ commits,99 位貢獻(xiàn)者[2]所提交的 628 個(gè) PR[3],還有許多除核心倉庫以外的開發(fā)及文檔編寫工作。在此對(duì) Vue 團(tuán)隊(duì)成員表示最深切的感謝,感謝貢獻(xiàn)者們提交的 PR,感謝贊助商和 sponsors[4] 的資金支持,感謝廣大社區(qū)成員參與預(yù)發(fā)布版本的設(shè)計(jì)與談?wù)?,并提供反饋。Vue 是一個(gè)獨(dú)立項(xiàng)目,為社區(qū)建立,也由社區(qū)維護(hù),沒有大家的鼎立支持,Vue 3.0 是不可能實(shí)現(xiàn)的。
進(jìn)一步推進(jìn) "漸進(jìn)式框架" 概念
Vue 從開始就有一個(gè)簡單的使命:成為任何人都能快速學(xué)習(xí)且平易近人的框架。隨著我們用戶群體的增長,框架的應(yīng)用范圍也在不斷擴(kuò)大,以適應(yīng)不斷迭代的需求。隨著時(shí)間的流逝,它演變成了 "漸進(jìn)式框架":一個(gè)可以逐步學(xué)習(xí)和采用的框架,同時(shí)為用戶提供持續(xù)支持,以應(yīng)對(duì)越來越多的苛刻場景。
時(shí)至今日,我們在全球擁有 130 多萬的用戶,我們看到 Vue 被應(yīng)用于各種不同的場景中的可能,從在傳統(tǒng)的服務(wù)端渲染頁面之上添加交互,到擁有數(shù)百個(gè)組件的完整單頁應(yīng)用。Vue 3.0 將這種靈活性進(jìn)一步提升。
分離內(nèi)部模塊
Vue 3.0 核心仍然通過一個(gè)簡單的 標(biāo)簽來使用,但其內(nèi)部結(jié)構(gòu)已經(jīng)被重寫,并解耦成一個(gè)個(gè)模塊的集合[5]。新的架構(gòu)下為源碼提供了更好的可維護(hù)性,并允許終端用戶通過 tree-shaking 的形式將減少一半的運(yùn)行時(shí)體積。
這些模塊還暴露了底層 API,解鎖了許多高級(jí)用法:
編譯器支持自定義 AST 轉(zhuǎn)換,用于在構(gòu)建時(shí)自定義(如,在構(gòu)建時(shí)進(jìn)行 i18n 操作[6]) 核心運(yùn)行時(shí)提供了一系列 API,用于針對(duì)不同渲染目標(biāo)(如 native moile[7]、WebGL[8] 或終端[9])的自定義容器。默認(rèn)的 DOM 渲染器也使用這系列 API 構(gòu)建。 `@vue/reactivity` 模塊[10]導(dǎo)出的功能,可以直接訪問 Vue 的響應(yīng)式系統(tǒng)。并且可以作為一個(gè)獨(dú)立的包進(jìn)行使用。它可以與其他模塊解決方案配對(duì)使用(如 lit-html[11]),甚至是在非 UI 場景中使用。
用于解決規(guī)模問題的全新 API
在 Vue 3.0 中,基于對(duì)象的 2.x API 基本沒有變化,并引入了 Composition API[12] — 一套全新的 API,旨在解決 Vue 在大規(guī)模應(yīng)用場景中的痛點(diǎn)。Composition API 構(gòu)建于響應(yīng)式 API 之上,實(shí)現(xiàn)了類似于 React hook 的邏輯組成與復(fù)用,相較于 2.x 基于對(duì)象的 API 方式來說,擁有更加靈活的代碼組織模式,以及更為可靠的類型推斷能力。
Composition API 同時(shí)還提供了適用于 Vue 2.x 的版本,可通過 `@vue/composition-api`[13] 插件來在項(xiàng)目中使用,目前已有適用于 Vue 2 和 Vue 3 的 Composition API 實(shí)用的工具庫(如 `vueuse`[14],`vue-composable`[15])。
性能提升
Vue 3 與 Vue 2 相比,在 bundle 包大小方面(tree-shaking 減少了 41% 的體積),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及內(nèi)存占用方面(減少了 54%)都有著顯著的性能提升[16]。
在 3.0 中,我們采取了 “編譯信息虛擬 DOM” 的方式:針對(duì)模板編譯器進(jìn)行了優(yōu)化,并生成渲染函數(shù)代碼,以提升靜態(tài)內(nèi)容的渲染性能,為綁定類型留下運(yùn)行時(shí)提示,最為重要的是,模板內(nèi)部的動(dòng)態(tài)節(jié)點(diǎn)進(jìn)行了扁平化處理,以減少運(yùn)行時(shí)遍歷的開銷。因此,用戶可以獲得兩全其美的效果,從模板中獲得編譯器優(yōu)化后的性能,或在需要時(shí)通過手動(dòng)渲染函數(shù)直接控制。
改進(jìn)與 TypeScript 的兼容
Vue 3 的代碼庫完全采用 TypeScript 編寫,自動(dòng)生成、測試并構(gòu)建類型聲明,因此它們總為最新。Composition API 可以很好的進(jìn)行類型推斷。Vetur,官方推出的 VSCode 插件,現(xiàn)已支持對(duì)模板表達(dá)式和 props 的類型檢查,同時(shí),Vue 3 已全面支持 TSX[17]。
實(shí)驗(yàn)特性
我們?yōu)閱挝募M件提出了兩個(gè)新特性[18](SFC,又稱為 .vue 文件):
:在 SFC 內(nèi)使用 Composition API 的語法糖:在 SFC 中支持將狀態(tài)作為 CSS 變量注入到樣式中
這些特性在 3.0 中均已實(shí)現(xiàn)且可用,但提供這些特性的目的只是為了收集反饋。在最終合并到 RFC 之前,這些特性仍是實(shí)驗(yàn)性的。
我們還實(shí)現(xiàn)了一個(gè)目前尚未編寫文檔的 組件,它允許在初始渲染或 branch 切換時(shí),等待嵌套的異步依賴(異步組件或帶有 async setup() 組件)。我們正在與 Nuxt.js 團(tuán)隊(duì)一起測試和迭代此功能(Nuxt 3 正在開發(fā)中[19]),并可能會(huì)在 3.1 時(shí)完善它。
分階段發(fā)布
Vue 3.0 的發(fā)布意味著本框架的整體準(zhǔn)備就緒。雖然框架的一些子項(xiàng)目還需進(jìn)一步完善才能達(dá)到穩(wěn)定狀態(tài)(特別是 router 以及 Vuex 與 devtools 的集成),但我們相信現(xiàn)在已經(jīng)可以使用 Vue 3 開啟全新的項(xiàng)目。同時(shí),我們也鼓勵(lì)庫作者開始升級(jí)項(xiàng)目以支持 Vue 3。
查閱 Vue 3 的庫指南[20],以了解框架所有子項(xiàng)目的詳細(xì)進(jìn)展。
遷移與 IE11 的支持
由于時(shí)間限制,我們推遲了遷移構(gòu)建(v3 兼容 v2 的構(gòu)建,以及遷移警告)和兼容 IE11 的計(jì)劃,并打算在 2020 年 Q4 集中進(jìn)行。因此,計(jì)劃遷移現(xiàn)有 v2 應(yīng)用或需要兼容 IE11 的用戶,目前應(yīng)注意限制。
下一階段工作
對(duì)于發(fā)布后的一段時(shí)間內(nèi),我們將重點(diǎn)關(guān)注:
遷移構(gòu)建 支持 IE11 Router 以及 Vuex 與 devtools 的集成 對(duì) Vetur 中模板類型推斷的進(jìn)一步改進(jìn)
目前,Vue 3 及其相關(guān)子項(xiàng)目的文檔站、github 分支以及 npm 的 dist 標(biāo)簽都將保持在 next 狀態(tài)。這意味著 npm install vue 仍會(huì)安卓 2.x 版本,而通過 npm install vue@next 將會(huì)安裝 v3 版本。我們計(jì)劃在 2020 年底之前將所有文檔鏈接,分支以及 npm 標(biāo)簽全部切為 3.0。
與此同時(shí),我們已開始規(guī)劃 2.7 版本,這將會(huì)是 2.x 的最后一個(gè)小版本。2.7 將與 v3 進(jìn)行兼容改進(jìn),并對(duì)使用 v3 中已刪除/更改的 API 發(fā)出警告,以更好的幫助 3.0 的遷移升級(jí)工作。我們計(jì)劃在 2021 年 Q1 進(jìn)行 2.7 的工作,發(fā)布后將直接成為 LTS 版本,維護(hù)周期為 18 個(gè)月。
試用
欲了解更多關(guān)于 Vue 3.0 的信息,請查閱全新的文檔站[21],如果你是 2.x 的老用戶,請直接查看遷移指南章節(jié)[22]。
關(guān)注我們
我們將為你帶來最前沿的前端資訊。
參考資料
30+ RFC: https://github.com/vuejs/rfcs/tree/master/active-rfcs
[2]99 位貢獻(xiàn)者: https://github.com/vuejs/vue-next/graphs/contributors
[3]628 個(gè) PR: https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview++sort%3Aupdated-desc
[4]贊助商和 sponsors: https://github.com/vuejs/vue/blob/dev/BACKERS.md
[5]解耦成一個(gè)個(gè)模塊的集合: https://github.com/vuejs/vue-next/tree/master/packages
[6]在構(gòu)建時(shí)進(jìn)行 i18n 操作: https://github.com/intlify/vue-i18n-extensions
[7]native moile: https://github.com/rigor789/nativescript-vue-next
[8]WebGL: https://github.com/Planning-nl/vugel
[9]終端: https://github.com/ycmjason/vuminal
[10]@vue/reactivity 模塊: https://github.com/vuejs/vue-next/tree/master/packages/reactivity
lit-html: https://github.com/yyx990803/vue-lit
[12]Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html
[13]@vue/composition-api: https://github.com/vuejs/composition-api
vueuse: https://github.com/antfu/vueuse
vue-composable: https://github.com/pikax/vue-composable
顯著的性能提升: https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing
[17]Vue 3 已全面支持 TSX: https://github.com/vuejs/vue-next/blob/master/test-dts/defineComponent.test-d.tsx
[18]兩個(gè)新特性: https://github.com/vuejs/rfcs/pull/182
[19]Nuxt 3 正在開發(fā)中: https://nuxtjs.slides.com/atinux/state-of-nuxt-2020
[20]Vue 3 庫指南: https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries
[21]全新的文檔站: https://v3.vuejs.org/
[22]遷移指南章節(jié): https://v3.vuejs.org/guide/migration/introduction.html
