2022 年 Vue 的發(fā)展如何？

作者：CUGGZ 2022-07-11 09:00:35

自 Vue 3 發(fā)布以來(lái)，越來(lái)越多的庫(kù)都接受了 Vue 3 并增加了對(duì)它的支持，而其他庫(kù)正在開(kāi)發(fā)兼容的版本。下面就來(lái)看看 2022 年 Vue 生態(tài)系統(tǒng)中那些令人興奮的發(fā)展。

大家好，我是 CUGGZ。

自 2014 年首次發(fā)布以來(lái)，Vue.js 的受歡迎程度和用戶數(shù)量一直在增加，并逐漸成為一個(gè)成熟的框架，被世界各地成千上萬(wàn)的開(kāi)發(fā)者所使用。下面就來(lái)看看 2022 年 Vue 的發(fā)展如何！

1、Vue 生態(tài)系統(tǒng)

（1）Vite

Vite 是一個(gè)用于前端開(kāi)發(fā)的新型構(gòu)建工具，目前最新版本為 v3.0.0-beta.9。Vite 帶來(lái)了超快的開(kāi)發(fā)體驗(yàn)和高度優(yōu)化的生產(chǎn)包。它與框架無(wú)關(guān)，任何人都可以使用它！Vite 是新的推薦選擇，而 Vue CLI 進(jìn)入維護(hù)模式。

（2）Vitest

Vitest 是一個(gè)由 Vite 提供支持的全新單元測(cè)試框架，最新版本為 v0.18.0。Vitest 為后續(xù)的測(cè)試運(yùn)行帶來(lái)了極快的速度，使其成為 TDD 方法的絕佳選擇。

（3）Pinia

Pinia 現(xiàn)在是 Vue 3 推薦的狀態(tài)管理庫(kù)。它引入了更簡(jiǎn)單的 API、適當(dāng)?shù)?TypeScript 支持等，這是開(kāi)發(fā)體驗(yàn)的一大進(jìn)步。雖然 Vuex 仍然與 Vue 3 兼容，但它現(xiàn)在處于維護(hù)模式。

（4）Volar

Volar VS Code 擴(kuò)展的開(kāi)發(fā)者 Johnson Chu 加入了 Vue.js 核心團(tuán)隊(duì)。Johnson 一直在發(fā)布版本和錯(cuò)誤修復(fù)，并致力于重構(gòu)內(nèi)部代碼庫(kù)以提高效率，甚至涵蓋更多功能，由于擴(kuò)展的維護(hù)者現(xiàn)在由 Vue 贊助，IDE 工具的未來(lái)會(huì)更加光明。

（5）Nuxt 3

Nuxt 團(tuán)隊(duì)宣布 Nuxt v3 將于今年夏季發(fā)布，這可能是最受期待的版本之一。其目前處于候選版本階段，已接近穩(wěn)定。

（6）Vuetify

對(duì)于很多人來(lái)說(shuō)，Nuxt 和 Vuetify 是阻止他們從 Vue 2 升級(jí)到 Vue 3 的兩個(gè)主要部分。Vuetify 3 最新版本為 beta 5，距離正式版的發(fā)布越來(lái)越近。

（7）VitePress 1

VitePress 近期發(fā)布了 1.0 alpha 4，并已在新的 Vue 文檔中使用。為了準(zhǔn)備 v1.0 版本，核心團(tuán)隊(duì)成員 Kia 致力于為最終用戶提供更高級(jí)別的 API。VitePress 現(xiàn)在是 Vue 3 支持的靜態(tài)站點(diǎn)生成的推薦解決方案。但是，關(guān)于名稱以及與 VuePress 的共存問(wèn)題仍然在討論中。簡(jiǎn)單地說(shuō)，VitePress 是否應(yīng)該取代 VuePress 3。

（8）Vue 新文檔

全新的 Vue 文檔發(fā)布，對(duì)設(shè)計(jì)、用戶體驗(yàn)進(jìn)行了全面檢查和提升，并引入了新的指南，以及在 Options API 和 Composition API 之間切換的功能。這個(gè)版本還引入了一個(gè)交互式教程，帶你了解 Vue 的所有主要功能。

（9）Vue Core

在4月和5月期間，Vue 團(tuán)隊(duì)花了大約一個(gè)月的時(shí)間處理 v3 中的核心 Bug，因此產(chǎn)生了大規(guī)模的補(bǔ)丁發(fā)布（3.2.24～26）、約 70 個(gè)PRs合并和約 140 個(gè)已解決問(wèn)題。

（10）Vue 默認(rèn)版本

Vue 3 正式成為默認(rèn)版本。

2、Vue 現(xiàn)在與未來(lái)

本部分，Vue.js 的作者尤雨溪總結(jié)了 Vue 3 的重大變化，分享升級(jí)到最新默認(rèn)版本的過(guò)程背后的細(xì)節(jié)，并展望 Vue 的未來(lái)。

（1）自上次更新以來(lái)，Vue 3 發(fā)生了什么變化？

2022 年 2 月發(fā)布了全新的 Vue 文檔，這標(biāo)志著軟啟動(dòng)過(guò)程的完成。當(dāng) Vue 3 發(fā)布時(shí)，它實(shí)際上只是核心，但隨著時(shí)間的推移，整個(gè) Vue 已經(jīng)成長(zhǎng)為一個(gè)完整的生態(tài)系統(tǒng)，包括路由、狀態(tài)管理、構(gòu)建工具、開(kāi)發(fā)工具、擴(kuò)展、IDE 支持等。所有這些都需要付出很多努力才能更新。

所以，現(xiàn)在基本上有了所有庫(kù)和工具的新版本。發(fā)布了全新的文檔，用 Pinia 取代了 Vuex，成為最新推薦的狀態(tài)管理庫(kù)，構(gòu)建工具現(xiàn)在由 Vite 提供支持。新的 IDE 擴(kuò)展是 Volar，它提供了更好的 TypeScript 支持和體驗(yàn)。還發(fā)布了重要的 DX 改進(jìn)，例如 <script setup>，并且還有更多改進(jìn)。

（2）TypeScript 對(duì) Vue 的開(kāi)發(fā)體驗(yàn)有何影響？

TypeScript 正在興起，因此任何現(xiàn)代框架在設(shè)計(jì)時(shí)都會(huì)考慮使用它。即使不使用 TypeScript，Volar 也能夠利用 Vue 類型并提供提示，從而消除需要記住變量類型的心理負(fù)擔(dān)。所有類型推斷和檢查也適用于模板。在重構(gòu)大型代碼庫(kù)時(shí)，使用 TypeScript 還可以讓開(kāi)發(fā)人員更容易發(fā)現(xiàn)錯(cuò)誤——工具會(huì)立即顯示錯(cuò)誤，供你修復(fù)。特別是在開(kāi)發(fā)大型項(xiàng)目時(shí)，將 TypeScript 與 Vue 結(jié)合使用將大大提高代碼的健壯性。

（3）從 Vue 3 發(fā)布到其成為默認(rèn)版本已有一年半，這個(gè)過(guò)程如何？

對(duì)于 Vue 3 的初始版本，使用 TypeScript 重寫(xiě)了所有內(nèi)容，但直到 Volar 成為正式擴(kuò)展后才完成，文檔已經(jīng)完全修改，所有內(nèi)容都經(jīng)過(guò)了修改或重寫(xiě)，它們與 Options API 和 Composition API 一起使用，并可以在它們之間切換。因此，學(xué)習(xí)體驗(yàn)和日常體驗(yàn)得到了升級(jí)。它們每個(gè)都是一個(gè)獨(dú)立的項(xiàng)目，這就是為什么整個(gè)過(guò)程花了這么長(zhǎng)時(shí)間才最終把所有內(nèi)容都準(zhǔn)備好。現(xiàn)在可以說(shuō) Vue 3 已經(jīng)準(zhǔn)備好了。

（4）這么深的過(guò)渡過(guò)程有必要嗎？

這并不都是必要的，但當(dāng)我們考慮升級(jí)時(shí)，總是需要在現(xiàn)有代碼庫(kù)的基礎(chǔ)上進(jìn)行漸進(jìn)式改進(jìn)或進(jìn)行大刀闊斧的重寫(xiě)之間進(jìn)行權(quán)衡。要基于 Vue 2 代碼庫(kù)并確保 100% 的兼容，就會(huì)攜帶許多依賴于 Vue 2 特有的內(nèi)部行為的庫(kù)的包袱。如果一直攜帶這些包袱，就會(huì)限制我們的創(chuàng)新。

所以，大規(guī)模地重寫(xiě)對(duì)我們來(lái)說(shuō)是一個(gè)正確的方向。Vue 3 的情況是短期內(nèi)犧牲了一些東西并破壞了一些庫(kù)，但這是為了擺脫過(guò)去的包袱而愿意付出的代價(jià)。現(xiàn)在有一個(gè)干凈的狀態(tài)，這將在未來(lái)帶來(lái)回報(bào)。

盡管 React 或 Ember 幾乎可以無(wú)縫地引入新版本，但這會(huì)給它們帶來(lái)巨大的維護(hù)開(kāi)銷。他們有一個(gè)很好的系統(tǒng)，可以慢慢添加新功能，逐步淘汰舊功能，我們可以從中學(xué)習(xí)。歸根結(jié)底，工程領(lǐng)域沒(méi)有絕對(duì)正確的答案。在升級(jí)方面，需要做出權(quán)衡。

（5）Vue 可以用于所有類型應(yīng)用和不同規(guī)模公司，是如何使框架如此通用的？

Vue 的初始版本旨在降低入門門檻，使它易于使用，并集成到現(xiàn)有系統(tǒng)中，現(xiàn)在也仍然堅(jiān)持并非常重視這種方法。隨著時(shí)間的推移，我們會(huì)慢慢添加一些組件來(lái)支持更高級(jí)的項(xiàng)目，例如單頁(yè)應(yīng)用路由、狀態(tài)管理、TypeScript 支持。

起初，有很多用戶在規(guī)模較小的應(yīng)用程序中使用Vue。隨著更多功能和工具的出現(xiàn)，Vue 的用戶群不斷增長(zhǎng)，但最初的用戶仍然存在并且仍然可以按照自己喜歡的方式使用它。這就是我們的秘訣——涵蓋所有領(lǐng)域。自 2014 年以來(lái)，這是一個(gè)漫長(zhǎng)的旅程，有很多挑戰(zhàn)，但每次我們添加新功能時(shí)，都試圖保持使用 Vue 的核心體驗(yàn)。

（6）前端面臨的主要挑戰(zhàn)是什么？

在 Web 開(kāi)發(fā)的世界中，有各種各樣的應(yīng)用程序：簡(jiǎn)單的登錄頁(yè)面、完全交互式的應(yīng)用程序、后臺(tái)儀表盤(pán)，還有對(duì)性能要求較高的電子商務(wù)應(yīng)用等。一般來(lái)說(shuō)，挑戰(zhàn)在于平衡開(kāi)發(fā)人員的效率和最終應(yīng)用的性能。除了內(nèi)容密集型電子商務(wù)之外，在這些領(lǐng)域中的大多數(shù)領(lǐng)域，我們都取得了不錯(cuò)的成績(jī)。

如今出現(xiàn)了一些新事物，例如 Remix 或 Qwik。其中很多都需要從編譯器到服務(wù)器再到客戶端進(jìn)行控制，所有這些都必須協(xié)同工作，才能提供端到端優(yōu)化的完全集成解決方案。你仍然可以編寫(xiě)相對(duì)簡(jiǎn)單的代碼并最終獲得最佳性能。這將是最大的挑戰(zhàn)——哪種解決方案可以最好地將這三個(gè)部分集成在一起？這是一個(gè)我們可以與 Nuxt 團(tuán)隊(duì)以及 Vue 生態(tài)系統(tǒng)中的其他成員緊密合作來(lái)探索的方向。

我們需要更多可以同時(shí)處理后端和前端的垂直解決方案，而停止從純客戶端或純后端的角度去思考。

（7）展望未來(lái)5年，如何看待 Vue？

Vue 是一個(gè)不斷發(fā)展的平臺(tái)。在未來(lái)五年內(nèi)，我們可能不會(huì)再進(jìn)行“Vue 2 到 3”這種類型的升級(jí)，因?yàn)?Vue 3 是一個(gè)足夠堅(jiān)實(shí)的基礎(chǔ)，可以在很長(zhǎng)一段時(shí)間內(nèi)進(jìn)行擴(kuò)展升級(jí)。我們將繼續(xù)嘗試編譯策略，因?yàn)?Vue 的優(yōu)勢(shì)是一個(gè)非常靈活的響應(yīng)式系統(tǒng)。

我們有一個(gè)已編譯的單文件組件，它可以編譯成不同的輸出。可以更改輸出，而源代碼保持不變。希望用戶體驗(yàn)在這段時(shí)間內(nèi)保持穩(wěn)定。從開(kāi)發(fā)經(jīng)驗(yàn)的角度來(lái)看，希望它保持穩(wěn)定，但編譯的方法允許我們?cè)诒澈筮M(jìn)行重大改進(jìn)。這就是我們的目標(biāo)。