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

近幾年 ，前端領域出現了兩大玩家：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 倍。

各框架的年下載量

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

開發人員 最喜歡的 Web 框架

3. 第四次JavaScript Risiing Stars 統計 了 GitHub 每一年新增的星數，顯示了驚人的統計數據：Vue.js 以 31.4k 星排名第一，React 以 22.4k 星排名第二，Angular.js 以 12k 星排名第四。

4. 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 的比較 能 對你有所幫助。