Vue、React 和 Angular：該選擇哪個框架？

2020-10-16 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 和公開的職位招聘。

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

各框架的年下載量


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

開發人員 最喜歡的 Web 框架


  1. 第四次 JavaScript Risiing Stars 統計 了 GitHub 每年新增的星數，顯示了驚人的統計數據：Vue.js 以 31.4k 星排名第一，React 以 22.4k 星排名第二，Angular.js 以 12k 星排名第四。
  2. 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 可能是最容易學的 ， 這主要有兩個原因：

  1. 它不需要特殊的設置。首先，你只需將 Vue 庫導入到 HTML 文件中，並添加一些 JS（對於較大的 Vue 項目）即可。
  2. 無需學習大型特殊語法。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元迷你書！

相關焦點

  • Vue、React和Angular:該選擇哪個框架?
    ，我們希望本文對你選擇正確的解決方案能有所幫助。 Vue.js 在 Vue.js 中，UI 和行為是組件的一部分。該框架也是高度可定製的，允許在腳本中結合 UI 和組件行為。
  • Vue、React 和 Angular:該選擇哪個框架?
    本文對三個最流行的 JavaScript 框架進行了全面的比較：Vue、React 和 Angular，如果你是正在開發或者目前正在考慮使用這些流行框架之一來啟動項目的開發人員，我們希望本文對你選擇正確的解決方案能有所幫助。
  • 三個JavaScript框架重量級:Angular,React和Vue
    你可能知道這三個JavaScript框架重量級，但哪一個是正確的？嘗試查看使用每個框架構建的相同應用程式並進行自己的評估。在這篇文章中，我們提出了一個使用三種不同框架開發三次的開源參考應用程式：React，Vue和Angular。
  • React、Angular和Vue三種最流行的前端框架哪一個最好?
    在本次討論中，我們將比較三種最受歡迎的前端開發技術 - Angular，React和Vue。我們正在根據項目架構或者從開發人員的角度來討論這種比較，他們將為新項目選擇技術。因此，我們首先需要明確決定是要開發單頁面應用程式（SPA）還是標準的多頁面應用程式。庫或框架？因此，在深入比較之前，我們首先需要確定哪一個是必需的 - 一個庫或一個框架？
  • React vs Angular vs Vue.js:到底怎麼選擇?
    我們分析了全球需要特定框架知識的開放職位數量。作為消息來源，我們採用Indeed.com並根據超過60,000個工作機會獲得以下分配。考慮到以下數據，我們決定分享每個前端框架的主要優點和缺點，並幫助技術專業人員或工程師根據他們的開發需求選擇最合適的框架。
  • 前端三大主流框架的區別
    其實相對react和vue來說，angular更可以說是一個框架，而react和vue本身只能算是一個庫。angular自帶了幾乎所有頁面應具有的功能，路由、表單、ajax、模版、雙向數據綁定等等。它原生的form表單模塊非常強大，除了雙向綁定的基本功能，還自帶驗證等，開發人員不需要再去為了這些功能找第三方庫，angular一個框架就包含了這些的所有，因此對於選擇困難症人群，這是一個優點。
  • 前端諸神大戰,Vue、React 依舊笑傲江湖
    【編者按】如今的前端框架市場基本由 React、Angular 和 Vue.js 佔據。三種框架都有自己獨到的優勢，也有各自的缺陷。那麼，項目搭建框架時該如何選擇才能得到更適合的效果呢？且看本文分析。來源：https://www.codeinwp.com/blog/angular-vs-vue-vs-react/而從 Google 趨勢的搜索結果來看，React 也依然是目前最受關注的框架，其次是 Vue，而 Angular 的關注度幾乎為零。來源：Google 趨勢就業方面的情況則略有不同。
  • angular框架發展史
    如果你是一個前端開發者，那麼你一定知道前端三大框架vue，angular，react。今天我們就來聊一聊angular的發展史。AngularJS vs Angular這兩個是一個東西嗎？angularjs指的是早期的angular版本，就是從2009年誕生的那個版本，那個時候angularjs版本更新很慢，直到2016年，angularjs的版本才是1.7*，而在這之後，angularjs不在繼續老版本的更新了，而是推出了一個全新的版本angular2，這個版本因為從底層徹底重構了，所以它和之前的angularjs可以說不是一個框架了，因此，現在人們討論的angular
  • Angular vs React vs Vue：完整的比較指南2020
    有時，由於開發人員需要根據預算，應用程式大小，時間和項目目標，最終用戶和資源等因素來選擇最佳的前端框架，因此選擇最佳的前端框架變得很繁瑣。發行年份：2014官方網站：https://vuejs.org/大小（KB）：91最新版本：2.6使用的公司：Alibaba, GitlabAngular vs React vs Vue哪個更好？
  • Angular、React、Vue,誰能成為2021年JavaScript最佳框架?
    要回答這個問題有點困難，在軟體開發行業中有大量可用的語言和框架。JavaScript已經成為大多數開發流程的支柱，所以我想對三種基於JavaScript的框架進行比較，我選擇的是Angular、React和Vue三種框架。
  • React 在前端框架世界仍是領先地位
    通常情況下，當框架的流行度提高時，往往會引發大量關於哪個框架「確實」更受歡迎、哪個框架更強大以及其他方面的爭論。用項目在 NPM 的下載量作為實際使用情況的參考沒有存在完美的衡量手段 —— 因為安裝和使用這些項目有很多種辦法，之所以選擇了 npm 作為參考是因為 npm 已經成為安裝 JavaScript 包的事實標準。如果我們查看每個框架的核心軟體包的下載統計數據 —— vue 軟體包和 react 軟體包，它們應該能反映出合理的實際使用情況。
  • 基於 Vue 日曆日程組件FullCalendar-Vue
    今天給大家分享如何在Vue框架下使用FullCalendar。Angular框架下使用方法。react版本https://fullcalendar.io/docs/reacthttps://github.com/fullcalendar/fullcalendar-reactangular
  • 前端框架Vue、angular、React大PK
    2　　angular　　angularJS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。模板功能強大豐富，自帶了極其豐富的angular指令。　　2. 是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；　　3. 自定義指令，自定義指令後可以在項目中多次使用。　　4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對于敏捷開發的團隊來說非常有幫助。
  • Vue或React?前端框架該如何選擇?
    2016年到2017年兩年時間，前端框架從jQuery一家獨大的情況，發展到現在的Angular、Vue、React三足鼎立的情況，三個框架各有優略，也都是比較成熟，但是同樣也造成了讓人無從下手的感覺，不知該如何選擇，下面就來談一談如何選擇該使用什麼框架。
  • React 比 Vue 難？為什麼呢？
    vue的核心庫只關注視圖層，非常容易與其它庫或已有項目整合。Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。 vue-loader大體上確定了單文件組件的生態，別人擴展SFC的也有，不用SFC的也有，但基本上井水不犯河水，用模板的和用JSX的誰也不噴誰，反正又沒礙著你不讓你用，而且如果做組件庫的話，混用的大有人在。
  • EMP for Vue&React 互相遠程調用
    在這種趨勢下， Micro Frontends 官網推出了微前端概念：（來自：https://micro-frontends.org/）什麼是 EMPEMP 是一套基於 Webpack5 和 Module Federation 的全新微前端框架（區別與以往以 dom 隔離和 iframe 為技術棧的微前端），同時更是一種全新的開發方式。
  • Vue.js超越React.js?勿以star數論高低!
    通常情況下，當框架的流行度提高時，往往會引發大量關於哪個框架「確實」更受歡迎、哪個框架更強大以及其他方面的爭論。用項目在 NPM 的下載量作為實際使用情況的參考沒有存在***的衡量手段 —— 因為安裝和使用這些項目有很多種辦法，之所以選擇了 npm 作為參考是因為 npm 已經成為安裝 JavaScript 包的事實標準。
  • 什麼是MVVM,MVC和MVVM的區別,MVVM框架VUE實現原理
    在過去的10年中，我們已經把很多傳統的服務端代碼放到了瀏覽器中，這樣就產生了成千上萬行的javascript代碼，它們連接了各式各樣的HTML 和CSS文件，但缺乏正規的組織形式，這也就是為什麼越來越多的開發者使用javascript框架。比如：angular、react、vue。瀏覽器的兼容性問題已經不再是前端的阻礙。前端的項目越來越大，項目的可維護性和擴展性、安全性等成了主要問題。
  • Vue vs React: Javascript框架之戰
    React sample app(https://github.com/ptasker/pasta-pete-react) Vue sample app(https://github.com/ptasker/pasta-pete-vue) 簡單介紹 除非你最近一直不關注前端的發展，不然你肯定聽說過由Facebook創建的JavaScript
  • 前端三大框架之React前世今生
    前端有三寶，angular，vue，react。目前這三大主流JS框架已經成三分之勢。其中的React框架是由臉書開發的，今天我們就來聊一聊ReactJS的前世今生。在2012年的時候，照片牆（Instagram）這個應用也大量採用了react這個技術。好東西要學會分享，在2013年的js開發者大會上，ReactJS被開源了。我們都知道開源社區是非常強大的，開源的React在短短幾年就積累了大量的擴展，這讓react一下子就成為了三大框架之一。如果React只能做網頁，我相信還不能讓這麼多人追捧它。