2022年 Vue 的發展如何?

語言: CN / TW / HK

大家好,我是CUGGZ。

自 2014 年首次釋出以來,Vue.js 的受歡迎程度和使用者數量一直在增加,並逐漸成為一個成熟的框架,被世界各地成千上萬的開發者所使用。下面就來看看 2022 年 Vue 的發展如何!

Vue 2022.png

1. Vue 生態系統

自 Vue 3 釋出以來,越來越多的庫都接受了 Vue 3 並增加了對它的支援,而其他庫正在開發相容的版本。下面就來看看 2022 年 Vue 生態系統中那些令人興奮的發展。

(1)Vite

Vite 是一個用於前端開發的新型構建工具,目前最新版本為 v3.0.0-beta.9。 Vite 帶來了超快的開發體驗和高度優化的生產包。它與框架無關,任何人都可以使用它!Vite 是新的推薦選擇,而 Vue CLI 進入維護模式。

(2)Vitest

Vitest 是一個由 Vite 提供支援的全新單元測試框架,最新版本為 v0.18.0。Vitest 為後續的測試執行帶來了極快的速度,使其成為 TDD 方法的絕佳選擇。

(3)Pinia

Pinia 現在是 Vue 3 推薦的狀態管理庫。它引入了更簡單的 API、適當的 TypeScript 支援等,這是開發體驗的一大進步。雖然 Vuex 仍然與 Vue 3 相容,但它現在處於維護模式。

(4)Volar

Volar VS Code 擴充套件的開發者 Johnson Chu 加入了 Vue.js 核心團隊。Johnson 一直在釋出版本和錯誤修復,並致力於重構內部程式碼庫以提高效率,甚至涵蓋更多功能,由於擴充套件的維護者現在由 Vue 贊助,IDE 工具的未來會更加光明。

(5)Nuxt 3

Nuxt 團隊宣佈 Nuxt v3 將於今年夏季釋出,這可能是最受期待的版本之一。其目前處於候選版本階段,已接近穩定。

(6)Vuetify

對於很多人來說,Nuxt 和 Vuetify 是阻止他們從 Vue 2 升級到 Vue 3 的兩個主要部分。Vuetify 3 最新版本為 beta 5,距離正式版的釋出越來越近。

(7)VitePress 1

VitePress 近期釋出了 1.0 alpha 4,並已在新的 Vue 文件中使用。為了準備 v1.0 版本,核心團隊成員 Kia 致力於為終端使用者提供更高級別的 API。VitePress 現在是 Vue 3 支援的靜態站點生成的推薦解決方案。但是,關於名稱以及與 VuePress 的共存問題仍然在討論中。簡單地說,VitePress 是否應該取代 VuePress 3。

(8)Vue 新文件

全新的 Vue 文件釋出,對設計、使用者體驗進行了全面檢查和提升,並引入了新的指南,以及在 Options API 和 Composition API 之間切換的功能。這個版本還引入了一個互動式教程,帶你瞭解 Vue 的所有主要功能。

(9)Vue Core

在4月和5月期間,Vue 團隊花了大約一個月的時間處理 v3 中的核心 Bug,因此產生了大規模的補丁釋出(3.2.24~26)、約 70 個PRs合併和約 140 個已解決問題。

(10)Vue 預設版本

Vue 3 正式成為預設版本。

2. Vue 現在與未來

本部分,Vue.js 的作者尤雨溪總結了 Vue 3 的重大變化,分享升級到最新預設版本的過程背後的細節,並展望 Vue 的未來。

(1)自上次更新以來,Vue 3 發生了什麼變化?

2022 年 2 月釋出了全新的 Vue 文件,這標誌著軟啟動過程的完成。當 Vue 3 釋出時,它實際上只是核心,但隨著時間的推移,整個 Vue 已經成長為一個完整的生態系統,包括路由、狀態管理、構建工具、開發工具、擴充套件、IDE 支援等。所有這些都需要付出很多努力才能更新。

所以,現在基本上有了所有庫和工具的新版本。釋出了全新的文件,用 Pinia 取代了 Vuex,成為最新推薦的狀態管理庫,構建工具現在由 Vite 提供支援。新的 IDE 擴充套件是 Volar,它提供了更好的 TypeScript 支援和體驗。還發布了重要的 DX 改進,例如 <script setup>,並且還有更多改進。

(2)TypeScript 對 Vue 的開發體驗有何影響?

TypeScript 正在興起,因此任何現代框架在設計時都會考慮使用它。即使不使用 TypeScript,Volar 也能夠利用 Vue 型別並提供提示,從而消除需要記住變數型別的心理負擔。所有型別推斷和檢查也適用於模板。在重構大型程式碼庫時,使用 TypeScript 還可以讓開發人員更容易發現錯誤——工具會立即顯示錯誤,供你修復。特別是在開發大型專案時,將 TypeScript 與 Vue 結合使用將大大提高程式碼的健壯性。

(3)從 Vue 3 釋出到其成為預設版本已有一年半,這個過程如何?

對於 Vue 3 的初始版本,使用 TypeScript 重寫了所有內容,但直到 Volar 成為正式擴充套件後才完成,文件已經完全修改,所有內容都經過了修改或重寫,它們與 Options API 和 Composition API 一起使用,並可以在它們之間切換。 因此,學習體驗和日常體驗得到了升級。 它們每個都是一個獨立的專案,這就是為什麼整個過程花了這麼長時間才最終把所有內容都準備好。現在可以說 Vue 3 已經準備好了。

(4)這麼深的過渡過程有必要嗎?

這並不都是必要的,但當我們考慮升級時,總是需要在現有程式碼庫的基礎上進行漸進式改進或進行大刀闊斧的重寫之間進行權衡。要基於 Vue 2 程式碼庫並確保 100% 的相容,就會攜帶許多依賴於 Vue 2 特有的內部行為的庫的包袱。如果一直攜帶這些包袱,就會限制我們的創新。

所以,大規模的重寫對我們來說是一個正確的方向。 Vue 3 的情況是短期內犧牲了一些東西並破壞了一些庫,但這是為了擺脫過去的包袱而願意付出的代價。現在有一個乾淨的狀態,這將在未來帶來回報。

儘管 React 或 Ember 幾乎可以無縫地引入新版本,但這會給它們帶來巨大的維護開銷。他們有一個很好的系統,可以慢慢新增新功能,逐步淘汰舊功能,我們可以從中學習。 歸根結底,工程領域沒有絕對正確的答案。 在升級方面,需要做出權衡。

(5)Vue 可以用於所有型別應用和不同規模公司,是如何使框架如此通用的?

Vue 的初始版本旨在降低入門門檻,使它易於使用,並整合到現有系統中,現在也仍然堅持並非常重視這種方法。隨著時間的推移,我們會慢慢新增一些元件來支援更高階的專案,例如單頁應用路由、狀態管理、TypeScript 支援。

起初,有很多使用者在規模的較小的應用程式中使用Vue。 隨著更多功能和工具的出現,Vue 的使用者群不斷增長,但最初的使用者仍然存在並且仍然可以按照自己喜歡的方式使用它。 這就是我們的祕訣——涵蓋所有領域。自 2014 年以來,這是一個漫長的旅程,有很多挑戰,但每次我們新增新功能時,都試圖保持使用 Vue 的核心體驗。

(6)前端面臨的主要挑戰是什麼?

在 Web 開發的世界中,有各種各樣的應用程式:簡單的登入頁面、完全互動式的應用程式、後臺儀表盤,還有對效能要求較高的電子商務應用等。 一般來說,挑戰在於平衡開發人員的效率和最終應用的效能。除了內容密集型電子商務之外,在這些領域中的大多數領域,我們都取得了不錯的成績。

如今出現了一些新事物,例如 Remix 或 Qwik。 其中很多都需要從編譯器到伺服器再到客戶端進行控制,所有這些都必須協同工作,才能提供端到端優化的完全整合解決方案。你仍然可以編寫相對簡單的程式碼並最終獲得最佳效能。這將是最大的挑戰——哪種解決方案可以最好地將這三個部分整合在一起? 這是一個我們可以與 Nuxt 團隊以及 Vue 生態系統中的其他成員緊密合作來探索的方向。

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

(7)展望未來5年,如何看待 Vue?

Vue 是一個不斷髮展的平臺。 在未來五年內,我們可能不會再進行“Vue 2 到 3”這種型別的升級,因為 Vue 3 是一個足夠堅實的基礎,可以在很長一段時間內進行擴充套件升級。我們將繼續嘗試編譯策略,因為 Vue 的優勢是一個非常靈活的響應式系統。

我們有一個已編譯的單檔案元件,它可以編譯成不同的輸出。可以更改輸出,而原始碼保持不變。希望使用者體驗在這段時間內保持穩定。從開發經驗的角度來看,希望它保持穩定,但編譯的方法允許我們在背後進行重大改進。這就是我們的目標。

3. Vue 發展趨勢

Vue 目前在前端領域的地位如何? Vue 的增長速度有多快? 下面來看看不同機構的調查統計情況!

(1)Statista

Vue 在2021年相對於2020 年上升了 2 位,排在第 5 位,有 19% 的受訪者選擇了它。

image.png

(2)BuiltWith

2022 年 5 月,全球 Top 100 萬網站的框架使用情況如下。

image.png

(3)NPMtrends

NPMtrends 表示,Vue 的使用在過去五年中一直在穩步增長。

image.png

(4)SimilarTech

使用 Vue 構建的網站的數量從一開始就持續穩定增長。

image.png

image.png

(5)GitHub dependents

自 2020 年以來,使用 Vue 構建的應用程式數量持續增長,增長了 46.52%。

image.png

image.png

(6)Stack Overflow 問題數量

在 Stack Overflow 上,使用者提出的 Vue 問題越來越多。

image.png

(7)State of JS

開發人員對 Vue.js 的使用率呈上升趨勢,在 2021 年達到了 51%。

image.png

(8)Stack Overflow 調查

Stack Overflow 每年都會對使用者進行調查,詢問最喜歡和最不喜歡的框架。儘管多年來可用的調查問題並不一致,但結果證實了 Vue 的上升趨勢。

image.png

2021年:

image.png

2020年:

image.png

2019年:

image.png

2018年:

image.png

(9)JetBrains 調查

2021 年,JetBrains 釋出的《2021 年開發者生態系統現狀》報告顯示,Vue.js 使用者的份額從 2020 年的 32% 增長到 2021 年的 43%。

image.png

image.png

(10)Google 趨勢

2020 年 10 月,使用者對所有框架的搜尋都有所下降,但從那以後,Vue 再次流行起來,慢慢回到了正軌。

image.png

參考: