這篇文章是一份綜合指南，可能是適合您的解決方案：Angular vs React vs Vue。

就在幾年前，開發(fā)人員還在爭論他們是否應該在他們的項目中使用 Angular 和 React。但是在過去的幾年中，我們看到了對 Vue.js 的第三個玩家的興趣增長。

如果您是一名剛開始從事某個項目的開發(fā)人員并且無法決定使用哪個 JavaScript 框架，那么本指南應該可以幫助您做出決定。

[[417628]]

在這里，我們將涵蓋 Angular、Vue 和 React 的各個方面，以了解它們?nèi)绾螡M足您的需求。這篇文章不僅僅是 Angular vs React vs Vue 的指南，而是旨在提供一個結(jié)構(gòu)來幫助判斷前端 JavaScript 框架的總體情況。如果明年有新框架問世，您將確切知道要查看哪些參數(shù)!

讓我們開始吧：

第 1 部分：Vue 與 React 與 Angular 的簡史

在我們進入技術(shù)細節(jié)之前，讓我們先談?wù)勥@些框架背后的歷史——只是為了更好地理解它們的哲學和它們隨著時間的推移而演變。

(1) 一切是如何開始的

由谷歌開發(fā)的Angular于 2010 年首次發(fā)布，使其成為最古老的。它是一個基于 TypeScript 的 JavaScript 框架。 2016 年 Angular 2 的發(fā)布發(fā)生了重大轉(zhuǎn)變(并且從原來的名稱 AngularJS 中刪除了“JS”)。 Angular 2+ 被稱為Angular。盡管 AngularJS(版本 1)仍在更新，但我們將重點討論 Angular。最新的穩(wěn)定版本是 Angular 11，它于 2020 年 11 月發(fā)布。

Vue也稱為 Vue.js，是該組中最年輕的成員。它由前 Google 員工 Evan You 在 2014 年開發(fā)。在過去三年中，Vue 的受歡迎程度發(fā)生了重大變化，盡管它沒有得到大公司的支持。當前的穩(wěn)定版本是 3.0，于 2020 年 9 月發(fā)布(此后有一些小的增量版本)。Vue 的貢獻者由 Patreon 支持。應該注意的是，Vue 3 目前在它自己的 GitHub 存儲庫中，并且已經(jīng)轉(zhuǎn)移到 TypeScript。

React由 Facebook 開發(fā)，最初于 2013 年發(fā)布。Facebook 在其產(chǎn)品(Facebook、Instagram 和 WhatsApp)中廣泛使用 React。當前的穩(wěn)定版本是 17.X，于 2020 年 10 月發(fā)布(此后有較小的增量更新)

以下是 Angular、React 和 Vue 的簡短總結(jié)，包括它們的狀態(tài)和歷史：

(2) 許可證

在使用開源框架之前，請確保通過其許可。有趣的是，所有三個框架都使用MIT 許可證，它對重用提供了有限的限制，即使在專有軟件中也是如此。在使用任何框架或軟件之前，請確保您了解許可證的含義。

(3) 人氣

由于“angular”和“react”是常用詞，因此很難從谷歌趨勢中掌握它們的流行程度。盡管如此，他們受歡迎程度的一個很好的指標是他們的 GitHub 代碼庫獲得的星數(shù)。2016 年年中，Vue 的星數(shù)突然發(fā)生了變化，最近，Vue 與 React 一起成為最受歡迎的框架之一。

Angular、React 和 Vue 的 GitHub 項目上的星數(shù)

讓我們檢查一下 Angular、React 和 Vue 的就業(yè)市場情況，這也是衡量受歡迎程度的一個很好的衡量標準：

(4) Angular vs React vs Vue 的就業(yè)市場

表明就業(yè)市場趨勢的最佳數(shù)據(jù)來源是各種就業(yè)委員會。

從 2018 年底的趨勢來看，需要 Angular 或 React 技能的工作數(shù)量大致相同，而 Vue 的數(shù)量仍然只是這個數(shù)字的一​小部分(大約 20%)。

如果您想獲得更多最新的分析，您可以試試Google Trends 搜索，它分解了過去 12 個月React 工作、Angular 工作和Vue 工作的搜索趨勢。數(shù)據(jù)嵌入如下：

如果您想查看您所在地區(qū)的求職趨勢，Google 趨勢還會按地理位置對其進行細分。

如果您嚴格從當前就業(yè)市場的角度來看，最好的選擇是學習 Angular 或 React。但是，鑒于 Vue 在過去三年中越來越受歡迎，使用 Vue 的項目或采用 Vue 的新項目可能需要一些時間才能達到要求更多開發(fā)人員的成熟度。

第 2 部分：社區(qū)與發(fā)展

現(xiàn)在您已經(jīng)熟悉了每個框架的歷史和近期趨勢，我們將通過社區(qū)來評估這些框架的發(fā)展。我們已經(jīng)看到，對于所有框架，過去一年都定期發(fā)布增量版本，這表明開發(fā)正在全面展開。

讓我們看看 Angular、React 和 Vue 的 GitHub 代碼庫統(tǒng)計數(shù)據(jù)(并注意 Vue 數(shù)字還包括單獨的 Vue 3.0 存儲庫)：

在比較 Vue 與 React 時，Vue 擁有大量的觀察者、Star和Fork。這顯示了 Vue 在用戶中的受歡迎程度及其與 React 相比的價值。但是，Vue 的貢獻者數(shù)量低于 Angular 和 React。

一種可能的解釋是Vue 完全由開源社區(qū)驅(qū)動，而 Angular 和 React 有很大一部分 Google 和 Facebook 員工為存儲庫做出貢獻。

從統(tǒng)計數(shù)據(jù)來看，這三個項目都表現(xiàn)出顯著的開發(fā)活動，而且未來肯定會繼續(xù)——只是這些統(tǒng)計數(shù)據(jù)不能成為決定不使用其中任何一個的基礎(chǔ)。

您需要考慮的另一個指標是 GitHub 的“Used By”標志，它需要由存儲庫作者啟用。這顯示了 GitHub 上有多少其他存儲庫依賴于該存儲庫。Angular 的 GitHub 存儲庫顯示有 170 萬用戶，React 目前顯示近 570 萬用戶，而 Vue 顯示其兩個存儲庫的總和超過 167,000。三個框架之間存在很大差異，但這主要是因為 Vue 是較新的框架，并且不能說明整體需求的全貌。

第 3 部分：遷移

當您使用您選擇的框架時，您不必擔心框架更新會出現(xiàn)并弄亂您的代碼。盡管在大多數(shù)情況下，從一個版本到另一個版本，您不會遇到很多問題，但重要的是要隨時掌握脈搏，因為某些更新可能更重要，并且需要進行調(diào)整以保持兼容性。

Angular計劃每六個月進行一次重大更新。在任何主要 API 被棄用之前還有六個月的時間，這讓您有兩個發(fā)布周期(一年)的時間來進行必要的更改(如果有的話)。

當談到 Angular 與 React 時，F(xiàn)acebook 表示穩(wěn)定性對他們來說至關(guān)重要，因為 Twitter 和 Airbnb 等大公司都在使用 React。通過版本升級通常是 React 中最簡單的，使用react-codemod 之類的腳本可以幫助您進行遷移。

在 Vue 3 文檔的遷移部分，Vue 提到Vue 2 和 Vue 3 之間有很多相同之處，而如果您從 1.x 遷移到 2，則90% 的 API 是相同的。有一個Vue 2 到 Vue 1 遷移輔助工具可在控制臺上運行以評估您的應用程序的狀態(tài)。

第 4 部分：使用 Vue、Angular 和 React

這里有一些重要的特征需要查看，主要是整體大小和加載時間、可用組件和學習曲線。

(1) 大小和加載時間

庫的大小不會成為一個重要的因素，因為緩存和縮小現(xiàn)在是非常標準的。盡管框架的大小之間可能存在顯著差異(例如 Angular 是最大的)，但與平均網(wǎng)頁大小(根據(jù)最新數(shù)據(jù)約為 2MB)相比，它們?nèi)匀缓苄　４送猓绻褂昧餍械? CDN加載這些庫，則用戶很可能已將庫加載到其本地系統(tǒng)中。

(2) 組件

組件是所有三個框架的組成部分，無論我們是在談?wù)揤ue、React還是 Angular。組件通常會獲得一個輸入，并根據(jù)它改變行為。此行為更改通常表現(xiàn)為頁面某些部分的 UI 更改。組件的使用使得代碼的重用變得容易。組件可能是電子商務(wù)網(wǎng)站上的購物車或社交網(wǎng)絡(luò)上的登錄框。

• Angular：在 Angular 中，組件被稱為指令。指令只是 DOM 元素上的標記，Angular 也可以跟蹤和附加特定的行為。因此，Angular 將組件的 UI 部分分離為 HTML 標簽的屬性，并將它們的行為以 JavaScript 代碼的形式分離。在查看 Angular 與 React 時，這就是它與眾不同的地方。

• React：有趣的是，React 結(jié)合了組件的 UI 和行為。例如，這里是 在 React 中創(chuàng)建 hello world 組件的代碼。在 React 中，代碼的同一部分負責創(chuàng)建 UI 元素并決定其行為。

• Vue：在查看 Vue 與 React 時，在 Vue 中，UI 和行為也是組件的一部分，這讓事情變得更加直觀。此外，Vue 是高度可定制的，它允許您從腳本中組合 UI 和組件的行為。此外，您還可以 在 Vue 中使用預處理器而不是 CSS，這是一個很棒的功能。Vue 在與其他庫(例如 Bootstrap )集成方面非常出色 。

(3) 學習曲線

那么學習這些框架有多難?

• Angular：Angular有一個陡峭的學習曲線，因為它是一個完整的解決方案，掌握 Angular 需要你學習相關(guān)的概念，如 TypeScript 和 MVC。盡管學習 Angular 需要時間，但在了解前端的工作原理方面，投資會帶來回報。

• Reaact：React 提供了一份入門指南，應該可以幫助人們在大約一個小時內(nèi)設(shè)置 React。該文檔詳盡而完整，并提供了 Stack Overflow 上已經(jīng)存在的常見問題的解決方案。React 不是一個完整的框架，高級功能需要使用第三方庫。這使得核心框架的學習曲線不那么陡峭，而是取決于您采用附加功能的路徑。但是，學習使用 React 并不一定意味著您正在使用最佳實踐。

• Vue：Vue提供了更高的可定制性，因此比 Angular 或 React 更容易學習。此外，Vue 與 Angular 和 React 在它們的功能(例如組件的使用)方面存在重疊。因此，從兩者中的任何一個過渡到 Vue 都是一個簡單的選擇。然而，Vue 的簡單性和靈活性是一把雙刃劍——它允許糟糕的代碼，使其難以調(diào)試和測試。

盡管 Angular、React 和 Vue 的學習曲線很長，但它們在掌握后的用途是無限的。例如，您可以將 Angular 和 React與 WordPress 和 WooCommerce集成以創(chuàng)建漸進式 Web 應用程序。

(4) Angular vs React vs Vue：誰是贏家?

在這篇文章的結(jié)尾，讓我們回顧一下每個框架的特性來嘗試回答這個問題：Angular vs React vs Vue：你應該選擇哪一個?

• Angular是最成熟的框架，在貢獻者方面有很好的支持，并且是一個完整的包。然而，學習曲線很陡峭，Angular 的開發(fā)概念可能會讓新開發(fā)人員望而卻步。對于擁有大型團隊和已經(jīng)使用 TypeScript 的開發(fā)人員的公司來說，Angular 是一個不錯的選擇。

• React已經(jīng)足夠成熟，并且擁有大量來自社區(qū)的貢獻。它獲得了廣泛的認可。React 的就業(yè)市場非常好，這個框架的未來看起來很光明。對于剛開始使用前端 JavaScript 框架的人、初創(chuàng)公司和喜歡靈活性的開發(fā)人員來說，React 看起來是一個不錯的選擇。與其他框架無縫集成的能力為那些希望代碼具有一定靈活性的人提供了很大的優(yōu)勢。

• Vue是最新的舞臺，沒有大公司的支持。然而，作為 Angular 和 React 的強大競爭對手，它在過去幾年中做得非常好，尤其是隨著 Vue 3.0 的發(fā)布。這可能與阿里巴巴和百度等許多中國巨頭選擇 Vue 作為他們主要的前端 JavaScript 框架有關(guān)。如果你喜歡簡單，但也喜歡靈活性，Vue 應該是你的選擇。

Angular 與 React 與 Vue 之爭的答案是沒有絕對正確的選擇，這是您可能預期的結(jié)論。

這些庫中的每一個都有自己的優(yōu)點和缺點。根據(jù)您正在處理的項目和您的個人要求，其中一個將比其他更合適。在決定之前做自己的研究總是很關(guān)鍵的，特別是如果你要從事商業(yè)冒險而不是個人項目。

本文由聞數(shù)起舞翻譯自Shaumik Daityari的文章《Angular vs React vs Vue: Which Framework to Choose in 2021》，轉(zhuǎn)載請注明出處，原文鏈接：

https://www.codeinwp.com/blog/angular-vs-vue-vs-react/)