Vue、React 和 Angular:該選擇哪個框架?

2020-12-26 InfoQ技術實驗室

本文對三個最流行的 JavaScript 框架進行了全面的比較：Vue、React 和 Angular，如果你是正在開發或者目前正在考慮使用這些流行框架之一來啟動項目的開發人員，我們希望本文對你選擇正確的解決方案能有所幫助。

本文最初發表在 Medium 博客，經原作者 inVerita 公司授權，InfoQ 中文站翻譯並分享。

近幾年 ，前端領域出現了兩大玩家：Google 發布的 Angular、Facebook 開發的 JavaScript 庫 React。在 2018 年，又有一個實力雄厚的玩家加入了這場競爭：Vue.js，它 很直白地表示出了自己 的豪心壯志——立志成為最受歡迎的 JavaScript 框架。

在深入了解這些流行框架的總體比較之前，讓我們先看看它們的起源。

Vue、React 和 Angular 簡史

Angular

Google 的一名員工 Misko Hevery 當時正在做一個副業項目，旨在簡化構建 Web 應用程式的過程。他在 2010 年將解決方案作為開源項目發布，名為 AngularJS，並被一些 知名企業 積極使用。

幾年後，由於 JavaScript 有了新的進展，團隊被迫將 AngularJS 基於 TypeScript 重寫 ，為了避免混淆，新框架名稱去掉了「JS」。Angular 每年更新兩次，上一次更新是 2020 年 2 月 6 日發布的 Angular 9。

React

在 JavaScript 框架中，React 一直處於領先地位，它最初是 Facebook 為滿足其產品需求而開發的，並於 2013 年成功地向技術受眾展示並開源。React 的精髓源於 Jordan Walke 創建的早期原型——Fax.js，該原型於 2011 年首次部署在 Facebook 的新聞源中。React 最新版本為 16.13.0，於 2020 年 2 月 26 日發布。

Vue.js

Google 前僱員 Evan You 在與 Angular 合作多年後，決定 自己 創建一個輕量級框架，其中將包含上述框架的最佳特性。 新框架 Vue.js 於 2014 年 2 月開源 ，從那時起，Vue.js 就獲得了極高的人氣。最新版本為 2.6 Macross ，於 2019 年 2 月 4 日發布。

框架流行度

Angular 和 React 是一對由來已久的對手。它們都是功能強大、最新、使用廣泛的 JavaScript 框架，並且都面臨著一個重大的變化：它們之間的競爭變成了 一場 流行度的較量。我們將通過四個主要指標來找出最流行的框架：NPM 趨勢、Stack Overflow Survey、GitHub stars 和公開的職位招聘。

在 Node Package Manager 報告中，React 仍然是最流行的 JavaScript 框架。從 2018 年 12 月到 2020 年 7 月這段時間，它的年下載量大約是 Vue.js 的 5 倍，是 Angular 的 13 倍。

各框架的年下載量

根據 2019 年 Stack Overflow 開發人員調查結果，React 最受開發人員喜愛（74.5%）、其次是 Vue.js（73.6%），最後是 Angular.js（57.6%）。

開發人員 最喜歡的 Web 框架

第四次 JavaScript Risiing Stars 統計 了 GitHub 每年新增的星數，顯示了驚人的統計數據：Vue.js 以 31.4k 星排名第一，React 以 22.4k 星排名第二，Angular.js 以 12k 星排名第四。2020 年 7 月 8 日在 Indeed 招聘網站搜索的結果顯示：在美國，React 有 43678 個招聘職位，Angular 有 10458 個招聘職位，而 Vue.js 僅有 1391 個招聘職位。因此，我們可以 認為 ，React 在工作崗位方面是個贏家，在開發人員中的受歡迎程度經久不衰。儘管如此，我們也可以看到，由於 Vue.js 社區堅定的支持，Vue.js 與 React 的對立情緒越來越激烈。Angular 保持著穩定的中間地位，得到了來自開發商和僱主雙方的積極反饋。

框架組件

框架的性能是由最有價值的部分——它的組件決定的。它們的工作流與接收輸入數據的方式以及對數據的響應方式有關。

Angular

Angular 的組件命名為 directive（指令） ， 它們是由 Angular 跟蹤的 DOM 元素上的標記。 A ngular 將組件的 UI 部分作為 HTML 標籤的屬性 ，並將 UI 和 組件的 行為以 JavaScript 代碼的形式分離開來。

React

與 Angular 相反，React 結合了 UI 和組件的行為。簡單地說，同一部分 代碼 負責 UI 元素的創建並控制其行為。

Vue.js

在 Vue.js 中，UI 和行為是組件的一部分。該框架也是高度可定製的，允許在腳本中結合 UI 和組件行為。

性能和框架大小

Angular

Angular 使用真實 DOM，因此它最適合用於內容不時更新的單頁應用程式。這會使更新過程變得非常緩慢，並且在丟失流的情況下，將需要花費很長時間才能找出問題所在。值得慶幸的是，雙向數據綁定過程將模型中所做的所有更改都以一種安全高效的方式複製到視圖中。由於可用的特性範圍很廣，與 Vue 和 React 相比，應用程式要「重」得多（約 500KB），這會稍微降低性能。

React

與 Angular 相反，React 使用了虛擬 DOM，增強了需要定期 更新 內容的所有應用程式 （不論大小） 的性能。單向數據可以更好地控制項目。缺點可能是開發人員需要不斷升級他們的技能，以適應 React 不斷發展的特性。由於 React 沒有提供 大量 的庫，所以，它的大小比 Angular 要小得多（ 只有 約 100KB）。

Vue.js

Vue 也使用虛擬 DOM，因此在項目中的更改不會正式對 DOM 產生影響。Vue 在這三者中，大小最小（大約 80KB），這大大提高了它的性能。

總之，考慮到性能，Vue 和 React 在開發易於維護和無 Bug 的 Web 應用程式更加方便。

對於正在考慮學習 新框架 的人來說，掌握一個新框架的過程 是否足夠簡單 非常重要。那麼，在它們三個中，哪一個最適合學習呢？

學習曲線

Vue.js 可能是最容易學的 ， 這主要有兩個原因：

它不需要特殊的設置。首先，你只需將 Vue 庫導入到 HTML 文件中，並添加一些 JS（對於較大的 Vue 項目）即可。無需學習大型特殊語法。Vue 的用法基於 JavaScript 和 HTML，通過 v-for 之類的指令進行了增強，這些指令都很容易解釋。Angular 和 React 都需要更為複雜的項目設置。不過，安裝設置的可用性簡化了這項任務： create-react-app 、 Angular CLI 和 Vue CLI （用於更複雜的項目）。

要掌握 Angular 和 React，還需要學習相應的 TypeScript 或 JSX 語法。

其中 ，Angular 的學習曲線被認為比 React 要陡峭得多。Angular 是一個不斷發展的複雜框架，為解決單個問題提供了多種選擇。

React 也需要 開發者持續學習 ，因為它經常更新，但若有 初學者教程和基本的 JavaScript 知識，學習起來就會容易 得多 。主要困難在於 Redux 庫。

應用案例

Angular

Angular 由 Google 開發，並在其 AdWords 應用程式中 大量 使用，以最大限度地提高性能。其他使用 Angular 的著名網站，我們可以列舉如下：Guardian、Lego、Nike、PayPal 和 Weather.com。

React

React 最初是為 Facebook 設計的，現在仍被該公司積極用於創建各種產品 ，包括 Twitter、Instagram、Whatapp 和 WordPress 都 採用了這個框架。

Vue.js

與 Angular 和 React 不同，Vue 並沒有強大的客戶在其每個產品中實現它。不過，值得慶幸的是它的靈活性。它已經在這些流行品牌中得到了普及：9Gag、Nintendo、GitLab 和 Grammarly 等。

小結： Vue、React、Angular 的對照表

Vue、React 和 Angular 的對照表

我們希望本文對 Vue、React 和 Angular 的比較 能 對你有所幫助。

參考閱讀：

https://medium.com/swlh/vue-vs-react-vs-angular-what-framework-would-you-choose-5d77a3680b0d

關注我並轉發此篇文章，私信我「領取資料」，即可免費獲得InfoQ價值4999元迷你書！

相關焦點

  • React、Angular和Vue三種最流行的前端框架哪一個最好?
    在本次討論中，我們將比較三種最受歡迎的前端開發技術 - Angular，React和Vue。我們正在根據項目架構或者從開發人員的角度來討論這種比較，他們將為新項目選擇技術。因此，我們首先需要明確決定是要開發單頁面應用程式（SPA）還是標準的多頁面應用程式。庫或框架？因此，在深入比較之前，我們首先需要確定哪一個是必需的 - 一個庫或一個框架？
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於vue,react,angular等框架的項目,碧如vue生態的elementUI, ant-design-vue, iView等成熟的UI框架
  • 快速在你的vue/react應用中實現ssr(服務端渲染)
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言我們都知道, Vue和React是構建客戶端應用程式的框架。默認情況下，可以在瀏覽器中輸出自定義組件，進行生成 DOM和操作 DOM, 也就是我們常說的客戶端渲染, 並且我們大部分主流的場景都是SPA(單頁面)應用, 而隨著 SPA尤其是 React、Vue、Angular 為代表的前端框架的流行
  • React vs Angular vs Vue.js——2019 該選誰?(更新版)
    我們在 2018 年分布了一篇比較 React 和 Angular 的文章，而在 2019 年，由於每個框架的快速版本迭代，我們將再次比較兩者以及市場上的新玩家 Vue.js，分享每個前端框架的優缺點，從而幫助開發者為產品開發中的每個單獨案例找到最適合他們開發需求的正確選擇。之前我們發布了一篇文章，比較了 Angular 與 React。
  • 精通react/vue組件設計之配合React Portals實現一個(Drawer)組件
    通過組件的設計過程,大家會接觸到一個完成健壯的組件設計思路和方法,也能在實現組件的過程逐漸對react/vue的高級知識和技巧有更深的理解和掌握,並且在企業實際工作做遊刃有餘.作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.
  • 手把手教你用JS/Vue/React實現幸運水果機(80後情懷之作)
    項目體驗地址免費視頻教程分別使用原生JS，Vue和React，手把手教你開發一個H5小遊戲，快速上手Vue和React框架的使用。玩家使用遊戲幣選擇希望押注的目標，按下開始後，小燈開始繞著正方形中每個格子轉。當小燈停下時，如果停在玩家押注的目標上則可贏取相應的遊戲幣。物品：遊戲中的物品有八種，分別為：蘋果、西瓜、木瓜、橙子、鈴鐺、77、雙星，這些物品又分為大小兩種。還有BAR圖標，分為2種。賠率：以下為所有固定賠率物品的賠率。
  • 基於jsoneditor二次封裝一個可實時預覽的json編輯器組件react版
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言做為一名前端開發人員,掌握vue/react/angular等框架已經是必不可少的技能了,我們都知道,vue或react等MVVM框架提倡組件化開發
  • 精通react/vue組件設計之實現一個Tag(標籤)和Empty(空狀態)組件
    /vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫.
  • 《精通react/vue組件設計》之快速實現一個可定製的進度條組件
    /vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫.
  • 《精通react/vue組件設計》之實現一個健壯的警告提示(Alert)組件
    其他業務類型所以我們在設計組件系統的時候可以參考如上分類去設計,該分類也是antd, element, zend等主流UI庫的分類方式.正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先看看實現後的組件效果:1. 組件設計思路按照之前筆者總結的組件設計原則,我們第一步是要確認需求.
  • JS框架性能對比:Soild高居榜首,Vue、React和Angular竟紛紛跌出前十
    該怎麼對比呢？那就選出 20 個最受歡迎的 JavaScript 框架，並用 JS Framework Benchmark 來一場針鋒相對的大比拼如何？免責聲明：這篇評測主要是出於娛樂目的，可能也會有些實際價值。一如既往，這裡提到的每一個庫在大多數場景中效率都很高。如果有什麼需要強調的話，那就是測出的性能優勢可能來自多種不同的技術和技巧組合。
  • React、Angular、Vue.js:三者完整的比較指南
    談到框架，這些天你的選擇差不多。在本文中，我們希望能夠更輕鬆地做出決定。選擇技術堆棧有時會變成一項繁瑣的任務，因為您需要考慮每個因素，包括預算，時間，應用程式大小，最終用戶，項目目標和資源。無論您是初學者，開發人員，自由職業者還是項目架構師形成策略，明智地決定每個框架的優缺點都是明智的。
  • 精通React/Vue系列之帶你實現一個功能強大的通知提醒框
    本文將會使用React來開發該組件，也會使用到Javascript中常用的一些設計模式，比如單例模式，但是不管你使用什麼框架來實現，原理都是通用的，如果感興趣的朋友可以用vue也實現以一下。正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先來解構一下Notification組件, 一個Notification分為以下幾個部分:每一個區塊都可以自定義配置, 也可以組合其他組件.並且我們可以配置提醒框出現的位置，就像antd
  • 精通react/vue組件設計之實現一個輕量級可擴展的模態框組件
    正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先來解構一下Modal組件, 一個Modal分為以下幾個部分:編輯搜圖每一個區塊都可以自定義配置, 也可以組合其他組件.實現後的組件效果:編輯搜圖1.
  • JS框架性能對比:Soild 高居榜首,Vue、React 和 Angular 竟紛紛跌出前十
    該怎麼對比呢？那就選出 20 個最受歡迎的 JavaScript 框架，並用 JS Framework Benchmark 來一場針鋒相對的大比拼如何？免責聲明：這篇評測主要是出於娛樂目的，可能也會有些實際價值。一如既往，這裡提到的每一個庫在大多數場景中效率都很高。如果有什麼需要強調的話，那就是測出的性能優勢可能來自多種不同的技術和技巧組合。
  • 值得選用的十三種優秀React JS框架
    您可以使用Create React App來構建目錄和文件。同時，該框架還提供了用於構建，測試和啟動應用程式的工具。如下所示，您只需一個簡單的命令，便可以輕鬆地創建React的原生項目。2.Material Kit React源於Google Material Design系統的Material Kit React是構建React UI組件的絕佳選擇。該框架庫提供了多種組件的組合，以及超過1000個完全編碼的組件。每一個組件都有著單獨的一層。
  • Vue.js 很難學?看看這個由 DCloud 與 Vue 官方合作推出的免費入門...
    這對於微小項目可能沒什麼感覺，甚至還很方便，但對於中大型但項目，更適合工程化開發模式的 Vue/react ，只要學會了就真的不會再回去了。這套在線觀看的免費入門視頻教程就是給你們準備的。Vue.js 是目前國內很火的前端框架，前端工程師招聘幾乎都要求掌握。
  • 6 大主流 Web前端框架優缺點對比
    我們努力對這個不可回答的問題作出回答：我該用什麼樣的框架？在這篇文章中，我們將對這個系列中所提到的每款框架做一個總結，包括我們所認為的強項和弱項。另外，我們為你留下了一些值得思考的問題。我是否需要使用框架？
  • 2020年的前端工程師請收下這幾個Vue.js開源框架
    vue是一套用於構建用戶界面的漸進式JavaScript框架，簡單說Vue是類似於view的前端框架。vue開發核心是關注視圖層，同時它更加容易與第三方庫結合，再者我們在現有的項目中可以直接整合一起。目前vue技術社區在英文或中文都非常豐富，社區都有很多經驗豐富的開發人員，其功能也非常豐富與使用性，屬於輕量級框架。