JavaScript 開發框架橫向比對（Vue、React 和 Angular）
1 背景比對
| 比對 | Vue | React | Angular |
|---|---|---|---|
| 出現年月 | 2013-7 | 2013-3 | 2010-1 |
| 框架型別 | MVVM | MVC | MVW |
| 開源許可 | MIT license | BSD3-license | MIT license |
- MIT license 與 BSD-license 之間的區別是：MIT license 允許衍生軟體加上我們自己的名字做推廣，而 BSD license 不可以。
- MVVM（Model-View-ViewModel）：將其中的View 的狀態和行為抽象化，分開了檢視 UI 與業務邏輯。
- MVW（Model-View-Whatever）：不限控制層。
Angular 出現最早，Vue 相對來說最新。
2 開發比對
| 比對 | Vue | React | Angular |
|---|---|---|---|
| 開發與維護 | 尤雨溪（Google前員工） | ||
| 團隊人數 | 16 | 未知 | 36 |
| Github star | 95284 | 96651 | 58492 |
| Github 程式碼貢獻者人數 | 190 | 1184 | 635 |
| 日評星數（最近一年） | 111.8 | 80.2 | 33.5 |
Github star 與 Github 程式碼貢獻者數字統計於 2018-5-25。
最近一年，從 npm 伺服器上的下載量趨勢：
React 與 Vue 在標星數上差不多，而 React 程式碼社群最為活躍。
3 流行度比對
3.1 國內流行度
我們在百度趨勢中比較這三大框架。
1、搜尋指數
搜尋指數指的是關鍵詞最近一個月的總體搜尋指數表現。
- 日均值：一段時間內搜尋指數日均值。
- 同比：與去年同期的同比變化率。
- 環比：與上一個相鄰時間段（即上一個7天/30天）的環比變化率。
2、搜尋指數趨勢
搜尋指數趨勢：網際網路使用者對鍵詞搜尋關注程度及持續變化情況。
- 演算法說明：以網民在百度的搜尋量為資料基礎，以關鍵詞為統計物件，科學分析並計算出各個關鍵詞在百度網頁搜尋中搜索頻次的加權。
3.2 國外流行度
因為 Google 不可用（你懂的），所以我們通過其它知名的網站來做比較。
3.2.1 stackoverflow
Stack Overflow 是一個與程式相關的 IT 技術問答網站。該網站擁有 400 萬用戶，每月 5.6 億的頁面瀏覽量。
1、目前最流行的技術框架排名：
Angular 與 React 排名靠前，Vue 未上榜。
2、目前大家最喜愛的技術框架排名：
相對 Angular 來說，React 的表現很搶眼，Vue 未上榜。
3.2.2 statejs
statejs 網站使用了一套包含上百個問題的問卷調查，從超過 28000 名開發者中得出的 2017 年關於前端框架調查，結果 如下：
很多開發者想學 Vue，而 React 擁有最多的開發者。
國內流行 Vue，國外流行 React。
4 技術比對
| 比對 | Vue | React | Angular |
|---|---|---|---|
| 基於元件 | 擅長 | 擅長 | - |
| 依賴標準 | ES5 或 ES6 | ES6 | TypeScript |
| 底層技術 | 單個檔案（模板 + 指令碼 +樣式） | JSX | 模板 |
| 資料繫結 | 單/雙向繫結 | 單向繫結 | 雙向繫結 |
| 支援原生開發 | 支援（Weex ） | 支援（react-native/react-native-renderer） | 支援（NativeScript、Ionic） |
| 服務端預渲染 | nuxt.js | next.js | Angular Universal |
| 學習曲線 | 簡單 | 中等 | 陡峭 |
1、基於元件：一個元件得到一個輸入，並且在一些內部的行為/計算之後，它返回一個渲染的 UI 模板作為輸出。定義的元件可以很容易在網頁或其他元件中重用。
2、 依賴標準：Vue 與 React 使用的都是 javaScript 語言標準，差別不大。Angular 是 javaScript 的超集，添加了可選的靜態型別和基於類的面向物件程式設計；但與整個 JavaScript 語言相比，目前 TypeScript 的使用者群仍然很小。
3、底層技術
- Vue 把模板，指令碼和樣式定義在一個檔案中，這意味著可以獲得語法高亮，CSS 支援以及更容易使用前處理器（如 Jade 或 SCSS）。
- React 的 JSX 是一個類似 HTML 語法的可選前處理器，並可在 JavaScript 中進行編譯。因為程式碼寫在同一個地方，所以可以在程式碼完成和編譯時更好地檢查。如果在 JSX 中輸入錯誤時，React 將無法通過編譯，它會打印出錯的位置。
- Angular 2 在執行時會靜默失敗。它的模板使用特殊的 Angular 語法來增強 HTML。雖然 React 需要 JavaScript 的知識，但 Angular 需要學習 Angular 特有的語法。
4、資料繫結
當 UI 元素（例如，使用者輸入）被更新時，Angular 的雙向繫結會改變 model 狀態。Angular 的方式實現起來程式碼更乾淨，開發人員更容易實現。在 React 中實現該功能，必須先更新 model，然後渲染 UI 元素。React 的方式會有更好的資料總覽，因為資料只能在一個方向上流動，這樣更容易除錯。
效能方面：
記憶體方面：
Vue 有著良好的效能和不錯的記憶體分配技巧，但如果比較快慢的話，這些框架都非常接近。注意：效能基準只作參考，不是判斷標準。
6 服務端預渲染
伺服器端預渲染有助於提升效能，整體使用者體驗和 SEO。
7 學習曲線
Angular 的學習曲線陡峭。即使對 Javascript 有深入的瞭解，也需要了解框架的底層原理。
React 可能需要針對第三方庫進行大量重大決策，比如狀態管理就有 16 種不同的 flux 包供選擇。
Vue 學習起來很容易。沒有經驗的 Javascript 開發者或者在過去幾年中主要使用 jQuery 開發者，考慮使用 Vue。Vue 看起來更像是簡單的 Javascript。
總結
Vue 優點：
* 平緩的學習曲線。
* 乾淨的程式碼。
* 輕量級的框架。
React 優點：
* 靈活。
* 擁有大型的技術生態系統。
* 良好的元件化設計。
Angular 優點：
* 基於 TypeScript。
* 面向物件程式設計。
建議：
1. 小型、業務簡單的專案建議使用 Vue 框架。
2. 大型、業務複雜的專案建議使用 React 框架。