Vue、React 和 Angular橫向比對（數據對比）

---

一些歷史

Angular 是基於 TypeScript 的 Javascript 框架。由 Google 進行開發和維護，它被描述爲「超級厲害的 JavaScript MVW 框架」。Angular（也被稱爲 「Angular 2+」，「Angular 2」 或者 「ng2」）已被重寫，是與 AngularJS（也被稱爲 「Angular.js」 或 「AngularJS 1.x」）不兼容的後續版本。當 AngularJS（舊版本）最初於2010年10月發佈時，仍然在修復bug，等等 —— 新的 Angular（sans JS）於 2016 年 9 月推出版本 2。最新的主版本是 4，由於版本 3 被跳過了。

React 被描述爲 「用於構建用戶界面的 JavaScript 庫」。React 最初於 2013 年 3 月發佈，由 Facebook 進行開發和維護，Facebook 在多個頁面上使用 React 組件（但不是做爲單頁應用程序）。

Vue 是 2016 年發展最爲迅速的 JS 框架之一。Vue 將本身描述爲一款「用於構建直觀，快速和組件化交互式界面的 MVVM 框架」。它於 2014 年 2 月首次由 Google 前員工 Evan You 發佈。

背景對比

對比	Vue	React	Angular
出現年月	2014-2	2013-3	2010-10
框架類型	MVVM	MVC	MVW
開源許可	MIT license	BSD3-license	MIT license

• MIT許可協議（The MIT License）是許多軟件許可條款中，被普遍使用的其中一種。與其餘常見的軟件許可協議（如GPL、LGPL、BSD）相比，MIT是相對寬鬆的軟件許可協議。
• BSD 許可協議（Berkeley Software Distribution license），是自由軟件中使用最普遍的許可協議之一。BSD 就是遵守這個許可證來發布，也所以而得名 BSD 許可協議。

MIT license 與 BSD-license 之間的區別是：MIT license 容許衍生軟件加上咱們本身的名字作推廣，而 BSD license 不能夠。

---

開發對比

	Vue	React	Angular
開發與維護	獨立開發者	Facebook	Google
團隊人數	25	未知	40

---

GitHub Stats

	stars	forks	issues	updated	created
angular.js	59308	29000	487	Dec 18, 2018	Jan 6,2010
Vue	122678	17540	230	Dec 20, 2018	Jul 29,2013
React	117977	21403	525	Dec 20, 2018	May 25,2013
angular	43663	11223	2618	Dec 20, 2018	Sep 19,2014

統計的數據有時效性，如需瞭解最新的數據點我

---

流行度對比

國內流行度

百度指數上的一個比較

搜索指數：指的是關鍵詞最近一個月的整體搜索指數表現。

• 日均值：一段時間內搜索指很多天均值。

• 同比：與去年同期的同比變化率。

• 環比：與上一個相鄰時間段（即上一個7天/30天）的環比變化率。

搜索指數趨勢：互聯網用戶對鍵詞搜索關注程度及持續變化狀況。

• 算法說明：以網民在百度的搜索量爲數據基礎，以關鍵詞爲統計對象，科學分析並計算出各個關鍵詞在百度網頁搜索中搜索頻次的加權。

國外流行度

• npm趨勢

• 谷歌趨勢

• 1. 熱度隨時間變化的趨勢
• 算法說明：數字表明相對於圖表中指定區域和指定時間內最高點的搜索熱度。熱度最高的字詞得 100 分；熱度是前者一半的字詞得 50 分；沒有足夠數據的字詞得 0 分。

2. 按區域比較細分數據

• stackoverflow

  Stack Overflow 是一個與程序相關的 IT 技術問答網站。該網站擁有 400 萬用戶，每個月 5.6 億的頁面瀏覽量。

  咱們對 Stack Overflow 2018 調查報告 進行分析（數據統計時間與本文時間差距較遠，數據存在延後）。

  • 目前最流行的技術框架排名：

Angular 與 React 排名靠前，Vue 未上榜。

* 目前你們最喜好的技術框架排名：

相對 Angular 來講，React 的表現很搶眼，Vue 未上榜。

• statejs

  statejs 網站使用了一套包含上百個問題的問卷調查，從超過 20000 名開發者中得出的 2018 年關於前端框架調查，結果 以下：

較多開發者想學 Vue，而 React 目前擁有最多的開發者。

總結：國內 流行 Vue，國外流行 React。

------------------------------

技術對比

對比	Vue	React	Angular
基於組件	擅長	擅長	-
依賴標準	ES6 或 ES6	ES6	TypeScript
底層技術	單個文件（模板+腳本+樣式）	JSX	模板
數據綁定	單/雙向綁定	單向綁定	雙向綁定
支持原生開發	支持（Weex）	支持（react-native/react-native-renderer）	支持（NativeScript、Ionic）
服務端渲染	nuxt.js	next.js	Angular Universal
瀏覽器兼容	ie8 +	ie9 +	ie9 +
學習曲線	簡單	中等	陡峭

1. 基於組件：一個組件獲得一個輸入，而且在一些內部的行爲/計算以後，它返回一個渲染的 UI 模板做爲輸出。定義的組件能夠很容易在網頁或其餘組件中重用。
2. 依賴標準：Vue 與 React 使用的都是 javaScript 語言標準，差異不大。Angular 是 javaScript 的超集，添加了可選的靜態類型和基於類的面向對象編程；但與整個 JavaScript 語言相比，目前 TypeScript 的用戶羣仍然很小。

3. 底層技術

   • Vue 具備「單個文件組件」。這彷佛是對於關注分離的權衡 - 模板，腳本和樣式在一個文件中，但在三個不一樣的有序部分中。這意味着你能夠得到語法高亮，CSS 支持以及更容易使用預處理器（如 Jade 或 SCSS）。
   • React 的 JSX 是一個相似 HTML 語法的可選預處理器，並可在 JavaScript 中進行編譯。由於代碼寫在同一個地方，因此能夠在代碼完成和編譯時更好地檢查。若是在 JSX 中輸入錯誤時，React 將沒法經過編譯，它會打印出錯的位置。
   • Angular 模板使用特殊的 Angular 語法（好比 ngIf 或 ngFor）來加強 HTML。雖然 React 須要 JavaScript 的知識，但 Angular 會迫使你學習 Angular 特有的語法。
4. 數據綁定：當 UI 元素（例如，用戶輸入）被更新時，Angular 的雙向綁定會改變 model 狀態。Angular 的方式實現起來代碼更乾淨，開發人員更容易實現。在 React 中實現該功能，必須先更新 model，而後渲染 UI 元素。React 的方式會有更好的數據總覽，由於數據只能在一個方向上流動，這樣更容易調試。
5. 支持原生：Angular 擁有用於原生應用的 NativeScript（由 Telerik 支持）和用於混合開發的 Ionic 框架。藉助 React，你能夠試試 react-native-renderer 來構建跨平臺的 iOS 和 Android 應用程序，或者用 react-native 開發原生 app。
   Weex 容許你使用 Vue 語法開發不只僅能夠運行在瀏覽器端，還能被用於開發 iOS 和 Android 上的原生應用的組件。另外一個選擇是 NativeScript-Vue，一個用 Vue.js 構建徹底原生應用的 NativeScript 插件。
6. 服務端渲染：Javascript 框架在客戶端上渲染頁面。這對於性能，總體用戶體驗和 SEO 是不利的。服務器端預渲染是一個好辦法。全部這三個框架都有相應的庫來實現服務端渲染。React 有 next.js，Vue 有 nuxt.js，而 Angular 有...... Angular Universal。

7. 瀏覽器兼容：

   • React兼容全部經常使用的瀏覽器，包括IE9及以上的版本。

     注意：咱們不支持那些不兼容ES5方法的老版瀏覽器，但若是你的應用包含了polyfill，例如es5-shim 和 es5-sham，你可能會發現你的應用仍然能夠在這些瀏覽器中正常運行。若是你選擇這麼幹，你就只能孤軍奮戰了。

   • Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的瀏覽器。

8. 學習曲線：

   • Angular 的學習曲線是很是陡峭的——做爲一個框架，它的 API 面積比起 Vue 要大得多，你也所以須要理解更多的概念才能開始有效率地工做。固然，Angular 自己的複雜度是由於它的設計目標就是隻針對大型的複雜應用；但不能否認的是，這也使得它對於經驗不甚豐富的開發者至關的不友好。
   • 對於 React，你可能須要針對第三方庫進行大量重大決策。僅僅 React 中就有 16 種不一樣的 flux 軟件包來用於狀態管理可供選擇。

   • Vue，你只須要有良好的 HTML 和 JavaScript 基礎。有了這些基本的技能，你就能夠很是快速地經過閱讀 指南 投入開發

     ---

體積和性能

體積

任何框架都不會十全十美：Angular 框架很是臃腫。gzip 文件大小爲 143k，而 Vue 爲 23K，React 爲 43k。

爲了提升性能，React 和 Vue 都使用了虛擬 DOM（Virtual DOM）。

性能

Angular，React 和 Vue 性能比較（源文件）

內存分配

內存分配（源文件）

總結一下：Vue 有着很好的性能和高深的內存分配技巧。若是比較快慢的話，這些框架都很是接近（好比 Inferno）。請記住，性能基準只能做爲考慮的附註，而不是做爲判斷標準。

---

本文首發於github，若是對你有幫助，能夠給我點個star，謝謝