本文對三個最流行的 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
