錯(cuò)誤做法

在升級(jí) Vue 3 的過(guò)程中，Vue 團(tuán)隊(duì)有一些做的不好的地方，也從中吸取了一些教訓(xùn)。

太多破壞性更改

首先，每個(gè)變更都可能引發(fā)許多小的破壞性修改。盡管看似可以單獨(dú)管理每項(xiàng)變更，但由于變更之間存在關(guān)聯(lián)，因此復(fù)雜性呈指數(shù)級(jí)增長(zhǎng)。

由此認(rèn)識(shí)到：

• 要對(duì)于想要更改或刪除的內(nèi)容，確保其正常運(yùn)行后再進(jìn)行修改。
• 對(duì)于新增的功能，應(yīng)該有一個(gè)逐步引入的階段。在這個(gè)階段中，新的功能應(yīng)該在特定標(biāo)志下引入，允許用戶選擇性使用，這樣用戶可以根據(jù)自己的需求和偏好來(lái)決定是否使用新功能，而不會(huì)破壞其他內(nèi)容。
• 最終，對(duì)于已經(jīng)棄用的功能，應(yīng)該在未來(lái)的版本中逐步刪除。在刪除之前，應(yīng)該確保這些功能不會(huì)對(duì)現(xiàn)有用戶造成任何影響，并提前通知用戶有關(guān)棄用和刪除的計(jì)劃。
• Vue 維護(hù)者也會(huì)分階段進(jìn)行版本變更，避免在一個(gè)版本中出現(xiàn)大量重大變化。

長(zhǎng)遠(yuǎn)來(lái)看，這些策略對(duì)于 Vue 的發(fā)展至關(guān)重要。在短期內(nèi)，Vue 不會(huì)考慮任何重大變化，而是專注于改進(jìn)和優(yōu)化現(xiàn)有的功能。未來(lái)，希望 Vue 3 能夠成為一個(gè)穩(wěn)定的基礎(chǔ)，為 Vue 的進(jìn)一步發(fā)展提供堅(jiān)實(shí)的基礎(chǔ)。

關(guān)注生態(tài)系統(tǒng)

第二個(gè)錯(cuò)誤是低估了 Vue 3 升級(jí)對(duì)生態(tài)系統(tǒng)庫(kù)的影響。Vue 團(tuán)隊(duì)原本認(rèn)為，在面臨如此巨大的工作量時(shí)，庫(kù)的開發(fā)者不需要將他們的現(xiàn)有庫(kù)調(diào)整為 Vue 3 的兼容版本。

結(jié)果是，當(dāng) Vue 3 進(jìn)行了許多內(nèi)部 API 和其他內(nèi)部行為的變更時(shí)，依賴這些內(nèi)部行為的大型庫(kù)升級(jí)到 Vue 3 變得非常困難。這導(dǎo)致了主要生態(tài)系統(tǒng)庫(kù)（如 Nuxt 和 Beautify）的升級(jí)過(guò)程變得漫長(zhǎng)而復(fù)雜。

由此認(rèn)識(shí)到：生態(tài)系統(tǒng)依賴性至關(guān)重要。

為了有效應(yīng)對(duì)這些潛在問(wèn)題，Vue 引入了一個(gè)生態(tài)系統(tǒng)自動(dòng)化持續(xù)集成系統(tǒng)，該系統(tǒng)專門針對(duì) Vue 核心的下游生態(tài)系統(tǒng)依賴和依賴 Vue 的下游項(xiàng)目進(jìn)行測(cè)試。

目前，已經(jīng)成功集成了超過(guò) 15 個(gè)項(xiàng)目，未來(lái)還將繼續(xù)增加。在每次提交變更之后，該系統(tǒng)都會(huì)對(duì)所有下游庫(kù)進(jìn)行測(cè)試，確保在發(fā)布前就能發(fā)現(xiàn)潛在的問(wèn)題。一旦發(fā)現(xiàn)問(wèn)題，可以與這些生態(tài)系統(tǒng)庫(kù)的作者合作，解決可能出現(xiàn)的兼容性問(wèn)題。

除此之外，Vue 團(tuán)隊(duì)希望明確禁止使用內(nèi)部 API，因?yàn)樗麄儼l(fā)現(xiàn)這些內(nèi)部 API 是導(dǎo)致庫(kù)子組使用 Vue 時(shí)遇到困難的主要因素。

幸運(yùn)的是，隨著 TypeScript 在大多數(shù)項(xiàng)目中的普及，現(xiàn)在可以在類型級(jí)別和運(yùn)行時(shí)級(jí)別實(shí)施這種禁止。對(duì)于官方工具或庫(kù)，仍需要公開一些內(nèi)部 API 以實(shí)現(xiàn)連接。然而，對(duì)于無(wú)法直接控制的生態(tài)系統(tǒng)庫(kù)，將逐步從類型定義中移除這些私有 API，以確保如果這些庫(kù)試圖使用它們時(shí)就會(huì)引發(fā)錯(cuò)誤。

同時(shí)發(fā)布所有內(nèi)容

第三個(gè)錯(cuò)誤就是：分開發(fā)布。Vue 3 核心在 2020 年 9 月發(fā)布，然而許多生態(tài)系統(tǒng)組件仍在開發(fā)中。初期文檔存在一些問(wèn)題，并且 composition API 沒有在文檔中作為首要概念進(jìn)行介紹。在 Vue 核心穩(wěn)定版發(fā)布時(shí)，官方庫(kù)、遷移構(gòu)建和開發(fā)工具支持尚未完善。

Vue 團(tuán)隊(duì)之所以這樣做，是因?yàn)檎J(rèn)為這些功能很重要，能夠盡早推出，以鼓勵(lì)生態(tài)系統(tǒng)中的庫(kù)和開發(fā)者開始嘗試和使用新的功能。這樣做的結(jié)果就是，在沒有完整的生態(tài)系統(tǒng)支持的情況下發(fā)布，給很多早期采用者帶來(lái)了困惑。

尤雨溪表示，在一個(gè)重大發(fā)布中，重要的是要確保一切都準(zhǔn)備就緒，而不是匆忙發(fā)布。

更重要的是，在發(fā)布大型版本之前，需要積極主動(dòng)地與利益相關(guān)者和生態(tài)系統(tǒng)合作，通過(guò)與庫(kù)維護(hù)者進(jìn)行合作，收集反饋并提前升級(jí)項(xiàng)目。這種合作方式可以更加積極主動(dòng)地推動(dòng)生態(tài)系統(tǒng)的改進(jìn)和發(fā)展。如果希望在未來(lái)實(shí)現(xiàn)更大的變更，這一點(diǎn)是必須要改進(jìn)的。

正確做法

當(dāng)然，在升級(jí) Vue 3 的過(guò)程中，也有很多好的做法，下面就來(lái)詳細(xì)看一看。

使用 TypeScript

使用 TypeScript 是最正確的做法之一。

現(xiàn)在，類型檢查已成為前端解決方案的必備要素。當(dāng)我們審視主要的前端解決方案時(shí)，可以發(fā)現(xiàn) TypeScript 的集成和支持已成為人們首要關(guān)注的事項(xiàng)。

采用 TypeScript 已被證明在長(zhǎng)期項(xiàng)目和大型團(tuán)隊(duì)環(huán)境中顯著提高了代碼的可維護(hù)性。在 Vue 的代碼庫(kù)中使用 TypeScript 也極大地增強(qiáng)了 Vue 自身的可維護(hù)性，為未來(lái)的迭代和擴(kuò)展打下了堅(jiān)實(shí)的基礎(chǔ)。

Composition API

第二個(gè)正確的做法是采用了組合式 API。最初這受到了人們的質(zhì)疑，但對(duì)于 Vue 來(lái)說(shuō)效果非常好。引入組合式 API 時(shí)，它受到了 React hooks 的啟發(fā)，但是它根植于 Vue 自己的響應(yīng)性系統(tǒng)。

實(shí)際上，仍然有人喜歡 Options API，但它存在一些組合式 API 沒有的限制。這部分原因是 Vue 的用戶群體已經(jīng)發(fā)生了變化。在早期，大多數(shù)用戶關(guān)注的是小到中型使用案例，重點(diǎn)是易于集成到現(xiàn)有的后端系統(tǒng)中。但隨著時(shí)間的推移，Vue 的維護(hù)者們看到用戶構(gòu)建了更復(fù)雜和要求更高的使用案例，以及大規(guī)模單頁(yè)面應(yīng)用。

為了讓 Vue 適應(yīng)不斷變化的用戶群體和行業(yè)需求，我們必須提出一些解決新問(wèn)題的新方法，其中可擴(kuò)展性是其中一個(gè)主要問(wèn)題。因此，組合式 API 本質(zhì)上是為了解決這種可擴(kuò)展性問(wèn)題而發(fā)明的，旨在提供一種解鎖這種可擴(kuò)展性的方法，同時(shí)盡可能地保留根植于 Vue 的用戶友好性。雖然在早期有很多爭(zhēng)議，但 Vue 團(tuán)隊(duì)的決策最終被證明是正確的。

那些采用組合式 API 的開發(fā)者發(fā)現(xiàn)它確實(shí)有很多好處。組合式 API 的出現(xiàn)也催生了強(qiáng)大的社區(qū)努力，例如 VueUse，它提供了一系列極其有用的實(shí)用程序，解決了許多問(wèn)題。這些問(wèn)題并不適合包含在 Vue 核心中，但社區(qū)很好地解決了這些問(wèn)題。事實(shí)上，VueUse 可能是直接由組合式 API 帶來(lái)的最大好處之一。

開發(fā)者體驗(yàn)

Vue 在開發(fā)者體驗(yàn)方面做出了明智的選擇，這一點(diǎn)也得到了回報(bào)。這一選擇促成了備受歡迎的 Web 構(gòu)建工具 Vite 的誕生，它源自一個(gè)專為 Vue 開發(fā)的開發(fā)服務(wù)器原型。如今，許多框架都在利用 Vite，包括 Nuxt。

Vue 對(duì)其 IDE 方面的投資也已經(jīng)取得了豐厚的回報(bào)，形成了一個(gè)擴(kuò)展的生態(tài)系統(tǒng)，使 Web 開發(fā)人員受益良多。這些 IDE 投入催生了 Volar 的誕生，它是一個(gè)子項(xiàng)目的總稱，涵蓋了 Vue 語(yǔ)言服務(wù)器和 Vue TSC。Vue TSC 是一個(gè)命令行界面，它包裝了 TypeScript，并為 Vue 組件提供了命令行時(shí)間檢查功能。

這套工具最初僅為 Vue 而設(shè)計(jì)，類似于 Vite，但現(xiàn)在已經(jīng)擴(kuò)展成為一個(gè)工具集生態(tài)系統(tǒng)，幫助其他框架構(gòu)建更出色的 IDE 和 TypeScript 支持。Volar 目前正逐步轉(zhuǎn)變成一個(gè)框架無(wú)關(guān)的核心，不僅支持 Vue，還支持 Astro、MDX 等其他可能采用它的框架。

這是 Vue 生態(tài)系統(tǒng)所獨(dú)有的現(xiàn)象，我們看到很多源自生態(tài)系統(tǒng)的創(chuàng)新理念開始產(chǎn)生比 Vue 生態(tài)系統(tǒng)更大的影響。

Vue 3 更好且不斷增長(zhǎng)

Vue 3 成功實(shí)現(xiàn)了他們?cè)O(shè)定的目標(biāo)，包括提供更好的性能、更強(qiáng)大的類型支持、更優(yōu)秀的可擴(kuò)展性和更優(yōu)的開發(fā)者體驗(yàn)。隨著 Vue 2 的支持在本月結(jié)束，Vue 3 的下載量已經(jīng)接近 Vue 總下載量的 48.8%。在過(guò)去一年中，Vue 3 的采用率幾乎翻了一番。這表明 Vue 3 在迅速贏得開發(fā)者的青睞和信任，并在前端開發(fā)領(lǐng)域產(chǎn)生了深遠(yuǎn)的影響。

展望未來(lái)

• 穩(wěn)定性是關(guān)鍵
• 在可預(yù)見的未來(lái)不會(huì)出現(xiàn) Vue 2 到 3 這種重大變更
• 專注于可無(wú)縫采用的改進(jìn)，例如：

• 響應(yīng)式系統(tǒng)/解析器優(yōu)化
• Vapor Mode：可選，類似與 solid 的解析策略