[譯] 2017 年比較 Angular、React、Vue 三劍客

0x7e2發表於2017-11-16

原文地址：Angular vs. React vs. Vue: A 2017 comparison

原文作者：Jens Neuhaus

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：Raoul1996

校對者：caoyi0905、PCAaron

2017 年比較 Angular、React、Vue 三劍客

為 web 應用選擇 JavaScript 開發框架是一件很費腦筋的事。現如今 Angular 和 React 非常流行，並且最近出現的新貴 VueJS 同樣博得了很多人的關注。更重要的是，這只是一些新起之秀。

Javascripts in 2017 —— things aren’t easy these days!

那麼我們如何選擇使用哪個框架呢？列出他們的優劣是極好的。我們將按照先前文章的方式去做，“共有 9 步：為 Web 應用選擇一個技術棧”。

在開始之前 —— 是否應用單頁 Web 應用開發？

首先你需要弄明白你需要單頁面應用程式（SPA）還是多頁面的方式。關於這個問題的詳細內容請閱讀我的部落格文章，“單頁面應用程式（SPA）與多頁 Web 應用程式（MPA）”（即將推出，請關注我 Twitter 的更新）。

今日首發：Angular，React 和 Vue

首先，我想從生命週期和戰略考慮角度討論。然後，我們再討論這三個 JavaScript 框架的功能和概念。最後，我們再做結論。

以下是我們今天要解決的問題：

這些框架或庫有多成熟？
這些框架只會火熱一時嗎？
這些框架相應的社群規模有多大，能得到多少幫助？
找到每個框架開發者容易嗎？
這些框架的基本程式設計概念 是什麼？
對於小型或大型應用程式，框架是否易用？
每個框架學習曲線什麼樣？
你期望這些框架的效能怎麼樣？
在哪能仔細瞭解底層原理？
你可以用你選擇的框架開發嗎？

準備好，聽我娓娓道來！

生命週期與戰略考慮

一些歷史

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 被跳過了。Google，Vine，Wix，Udemy，weather.com，healthcare.gov 和 Forbes 都使用 Angular（根據 madewithangular，stackshare 和 libscore.com 提供的資料）。

React 被描述為 “用於構建使用者介面的 JavaScript 庫”。React 最初於 2013 年 3 月釋出，由 Facebook 進行開發和維護，Facebook 在多個頁面上使用 React 元件（但不是作為單頁應用程式）。根據 Chris Cordle 這篇文章的統計，React 在 Facebook 上的使用遠遠多於 Angular 在 Google 上的使用。React 還被 Airbnb，Uber，Netflix，Twitter，Pinterest，Reddit，Udemy，Wix，Paypal，Imgur，Feedly，Stripe，Tumblr，Walmart 等使用（根據 Facebook, stackshare 和 libscore.com 提供的資料）。

Facebook 正在開發 React Fiber。它會改變 React 的底層 - 渲染速度應該會更快 - 但是在變化之後，版本會向後相容。Facebook 將會在 2017 年 4 月的開發者大會上討論新變化，併發布一篇非官方的關於新架構的文章。React Fiber 可能與 React 16 一起釋出。

Vue 是 2016 年發展最為迅速的 JS 框架之一。Vue 將自己描述為一款“用於構建直觀，快速和元件化互動式介面的 MVVM 框架”。它於 2014 年 2 月首次由 Google 前員工 Evan You 釋出（順便說一句：尤雨溪那時候發表了一篇 vue 釋出首周的營銷活動和資料的部落格文章）。尤其是考慮到 Vue 在沒有大公司的支援的情況下，作為一個人開發的框架還能獲得這麼多的吸引力，這無疑是非常成功的。尤雨溪目前有一個包含數十名核心開發者的團隊。2016 年，版本 2 釋出。Vue 被阿里巴巴，百度，Expedia，任天堂，GitLab 使用 — 可以在 madewithvuejs.com 找到一些小型專案的列表。

Angular 和 Vue 都遵守 MIT license 許可，而 React 遵守 BSD3-license 許可證。在專利檔案上有很多討論。James Ide（前 Facebook 工程師）解釋專利檔案背後的原因和歷史：Facebook 的專利授權是在保護自己免受專利訴訟的能力的同時分享其程式碼。專利檔案被更新了一次，有些人聲稱，如果你的公司不打算起訴 Facebook，那麼使用 React 是可以的。你可以在 Github 的這個 issue 上檢視討論。我不是律師，所以如果 React 許可證對你或你的公司有問題，你應該自己決定。關於這個話題還有很多文章：Dennis Walsh 寫到，你為什麼不該害怕。Raúl Kripalani 警告：反對創業公司使用 React，他還寫了一篇備忘錄概覽。此外，Facebook 上還有一個最新的宣告：解釋 React 的許可證。

核心開發

如前所述，Angular 和 React 得到大公司的支援和使用。Facebook，Instagram 和 WhatsApp 正在它們的頁面使用 React。Google 在很多專案中使用 Angular，例如，新的 Adwords 使用者介面是使用 Angular 和 Dart。然而，Vue 是由一群通過 Patreon 和其他贊助方式支援的個人實現的，是好壞你自己確定。Matthias Götzke 認為 Vue 小團隊的好處是用了更簡潔和更少的過度設計的程式碼或 API。

我們來看看一些統計資料：Angular 在團隊介紹頁列出 36 人，Vue 列出 16 人，而 React 沒有團隊介紹頁。在 Github 上，Angular 有 25,000+ 的 star 和 463 位程式碼貢獻者，React 有 70,000+ 的 star 和 1,000+ 位程式碼貢獻者，而 Vue 有近 60,000 的 star 和只有 120 位程式碼貢獻者。你也可以檢視 Angular，React 和 Vue 的 Github Star 歷史。又一次說明 Vue 的趨勢似乎很好。根據 bestof.js 提供的資料顯示，在過去三個月 Angular 2 平均每天獲得 31 個 star，React 74 個，Vue.JS 107 個。

資料來源

更新: 感謝 Paul Henschel 提出的 npm 趨勢。npm 趨勢顯示了 npm 包的下載次數，相對比單獨地看 Github star 更有用：

市場生命週期

由於各種名稱和版本，很難在 Google 趨勢中比較 Angular，React 和 Vue。一種近似的方法可以是“網際網路與技術”類別中的搜尋。結果如下：

Vue 沒有在 2014 年之前建立 - 所以這裡有什麼不對勁。La Vue是法語的 “view” ，“sight” 或 “opinion”。也許就是這樣。“VueJS” 和 “Angular” 或 “React” 的比較也是不公平的，因為 VueJS 幾乎沒有搜尋到任何結果。

那我們試試別的吧。ThoughtWorks 的 Technology Radar 技術隨時間推移的變化。ThoughtWorks 的 Technology Radar 隨著時間推移，技術的演進過程給人深刻的印象。Redux 是在採用階段（被 ThoughtWorks 專案採用的！），它在許多 ThoughtWorks 專案中的價值是不可估量的。Vue.js 是在試用階段（被試著用的）。Vue被描述為具有平滑學習曲線的，輕量級並具靈活性的Angular的替代品。Angular 2 是正在處於評估階段使用 —— 已被 ThoughtWork 團隊成功實踐，但是還沒有被強烈推薦。

根據 2017 年 Stackoverflow 的最新調查，被調查的開發者中，喜愛 React 有 67%，喜歡 AngularJS 的有 52%。“沒有興趣在開發中繼續使用”的開發者佔了更高的數量，AngularJS（48%）和 React（33%）。在這兩種情況下，Vue 都不在前十。然後是 statejs.com 關於比較 “前端框架” 的調查。最有意思的事實是：React 和 Angular 有 100% 的認知度，23% 的受訪者不瞭解 Vue。關於滿意度，92% 的受訪者願意“再次使用” React ，Vue 有 89% ,而 Angular 2 只有 65%。

客戶滿意度調查呢？Eric Elliott 於 2016 年 10 月開始評估 Angular 2 和 React。只有 38% 的受訪者會再次使用 Angular 2，而 84% 的人會再次使用 React。

長期支援和遷移

Facebook 在其設計原則中指出，React API 非常穩定。還有一些指令碼可以幫助你從當前的API移到更新的版本：請查閱 react-codemod。遷移是非常容易的，沒有這樣的東西（需要）作為長期支援的版本。在 Reddit 這篇文章中指出，人們看到到升級從來不是問題。React 團隊寫了一篇關於他們版本控制方案的部落格文章。當他們新增棄用警告時，在下一個主要版本中的行為發生更改之前，他們會保留當前版本的其餘部分。沒有計劃更改為新的主要版本 - v14 於 2015 年 10 月釋出，v15 於 2016 年 4 月釋出，而 v16 還沒有釋出日期。（譯者注：v16 於 2017 年 9 月底釋出）最近 React核心開發人員指出，升級不應該是一個問題。

關於 Angular，從 v2 釋出開始，有一篇關於版本管理和釋出 Angular 的部落格文章。每六個月會有一次重大更新，至少有六個月的時間（兩個主要版本）。在文件中有一些實驗性的 API 被標記為較短的棄用期。目前還沒有官方公告，但根據這篇文章，Angular 團隊已經宣佈了以 Angular 4 開始的長期支援版本。這些將在下一個主要版本釋出之後至少一年得到支援。這意味著至少在 2018 年 9 月之前，將支援 Angular 4，並提供 bug 修復和重要補丁。在大多數情況下，將 Angular 從 v2 更新到 v4 與更新 Angular 依賴關係一樣簡單。Angular 還提供了有關是否需要進一步更改的資訊指南。

Vue 1.x 到 2.0 的更新過程對於一個小應用程式來說應該很容易 - 開發者團隊已經聲稱 90% 的 API 保持不變。在控制檯上有一個很好的升級 - 診斷遷移 - 輔助工具。一位開發人員指出，從 v1 到 v2 的更新在大型應用程式中仍然沒有挑戰。不幸的是，關於 LTS 版本的下一個主要版本或計劃資訊沒有清晰的（公共）路徑。

還有一件事：Angular 是一個完整的框架，提供了很多捆綁在一起的東西。React 比 Angular 更靈活，你可能會使用更多獨立的，不穩定的，快速更新的庫 - 這意味著你需要自己維護相應的更新和遷移。如果某些包不再被維護，或者其他一些包在某些時候成為事實上的標準，這也可能是不利的。

人力資源與招聘

如果你的團隊有不需要了解更多 Javascript 技術的 HTML 開發人員，則最好選擇 Angular 或 Vue。React 需要了解更多的 JavaScript 技術（我們稍後再談）。

你的團隊有工作時可以敲程式碼的設計師嗎？Reddit 上的使用者 “pier25” 指出，如果你在 Facebook 工作，每個人都是一個資深開發者，React 是有意義的。然而事實上，你不會總是找到一個可以修改 JSX 的設計師，因此使用 HTML 模板將會更容易。

Angular 框架的好處是來自另一家公司的新的 Angular 2 開發人員將很快熟悉所有必要的約定。React 專案在架構決策方面各不相同，開發人員需要熟悉特定的專案設定。

如果你的開發人員具有物件導向的背景或者不喜歡 Javascript，Angular 也是很好的選擇。為了推動這一點，這裡是 Mahesh Chand 引述：

我不是一個 JavaScript 開發人員。我的背景是使用 “真正的” 軟體平臺構建大型企業系統。我從 1997 年開始使用 C，C ++，Pascal，Ada 和 Fortran 構建應用程式。（...）我可以清楚地說，JavaScript 對我來說簡直是胡言亂語。作為 Microsoft MVP 和專家，我對 TypeScript 有很好的理解。我也不認為 Facebook 是一家軟體開發公司。但是，Google 和微軟已經是最大的軟體創新者。我覺得使用 Google 和微軟強大支援的產品會更舒服。另外（...）與我的背景，我知道微軟對 TypeScript 有更巨集偉的藍圖。

emmmmmmmm...... 我應該提到的，Mahesh 是微軟的區域總監。

React，Angular 和 Vue 的比較

元件

我們所討論的框架都是基於元件的。一個元件得到一個輸入，並且在一些內部的行為/計算之後，它返回一個渲染的 UI 模板（一個登入/登出區或一個待辦事項列表項）作為輸出。定義的元件應該易於在網頁或其他元件中重用。例如，你可以使用具有各種屬性（列，標題資訊，資料行等）的網格元件（由一個標題元件和多個行元件組成），並且能夠在另一個頁面上使用具有不同資料集的元件。這裡有一篇關於元件的綜合性文章，如果你想了解更多這方面的資訊。

React 和 Vue 都擅長處理元件：小型的無狀態的函式接收輸入和返回元素作為輸出。

Typescript，ES6 與 ES5

React 專注於使用 Javascript ES6。Vue 使用 Javascript ES5 或 ES6。

Angular 依賴於 TypeScript。這在相關示例和開源專案中提供了更多的一致性（React 示例可以在 ES5 或 ES6 中找到）。這也引入了像裝飾器和靜態型別的概念。靜態型別對於程式碼智慧工具非常有用，比如自動重構，跳轉到定義等等 - 它們也可以減少應用程式中的錯誤數量，儘管這個話題當然沒有共識。Eric Elliott 在他的文章 “靜態型別的令人震驚的祕密” 中不同意上面的觀點。Daniel C Wang 表示，使用靜態型別並沒有什麼壞處，同時有測試驅動開發（TDD）和靜態型別挺好的。

你也應該知道你可以使用 Flow 在 React 中啟用型別檢查。這是 Facebook 為 JavaScript 開發的靜態型別檢查器。Flow 也可以整合到 VueJS 中。

如果你在用 TypeScript 編寫程式碼，那麼你不需要再編寫標準的 JavaScript 了。儘管它在不斷髮展，但與整個 JavaScript 語言相比，TypeScript 的使用者群仍然很小。一個風險可能是你正在向錯誤的方向發展，因為 TypeScript 可能 - 也許不太可能 - 隨著時間的推移也會消失。此外，TypeScript 為專案增加了很多（學習）開銷 - 你可以在 Eric Elliott 的 Angular 2 vs. React 比較中閱讀更多關於這方面的內容。

更新: James Ravenscroft 在對這篇文章的評論中寫道，TypeScript 對 JSX 有一流的支援 - 可以無縫地對元件進行型別檢查。所以，如果你喜歡 TypeScript 並且你想使用 React，這應該不成問題。

模板 —— JSX 還是 HTML

React 打破了長期以來的最佳實踐。幾十年來，開發人員試圖分離 UI 模板和內聯的 Javascript 邏輯，但是使用 JSX，這些又被混合了。這聽起來很糟糕，但是你應該聽彼得·亨特（Peter Hunt）的演講 “React：反思最佳實踐”（2013 年 10 月）。他指出，分離模板和邏輯僅僅是技術的分離，而不是關注的分離。你應該構建元件而不是模板。元件是可重用的、可組合的、可單元測試的。

JSX 是一個類似 HTML 語法的可選前處理器，並隨後在 JavaScript 中進行編譯。JSX 有一些怪癖 —— 例如，你需要使用 className 而不是 class，因為後者是 Javascript 的保留字。JSX 對於開發來說是一個很大的優勢，因為程式碼寫在同一個地方，可以在程式碼完成和編譯時更好地檢查工作成果。當你在 JSX 中輸入錯誤時，React 將不會編譯，並列印輸出錯誤的行號。Angular 2 在執行時靜默失敗（如果使用 Angular 中的預編譯，這個引數可能是無效的）。

JSX 意味著 React 中的所有內容都是 Javascript -- 用於JSX模板和邏輯。Cory House 在 2016 年 1 月的文章中指出：“Angular 2 繼續把 'JS' 放到 HTML 中。React 把 'HTML' 放到 JS 中。“這是一件好事，因為 Javascript 比 HTML 更強大。

Angular 模板使用特殊的 Angular 語法（比如 ngIf 或 ngFor）來增強 HTML。雖然 React 需要 JavaScript 的知識，但 Angular 會迫使你學習 Angular 特有的語法。

Vue 具有“單個檔案元件”。這似乎是對於關注分離的權衡 - 模板，指令碼和樣式在一個檔案中，但在三個不同的有序部分中。這意味著你可以獲得語法高亮，CSS 支援以及更容易使用前處理器（如 Jade 或 SCSS）。我已經閱讀過其他文章，JSX 更容易除錯，因為 Vue 不會顯示不規範 HTML 的語法錯誤。這是不正確的，因為 Vue 轉換 HTML 來渲染函式 - 所以錯誤顯示沒有問題（感謝 Vinicius Reis 的評論和更正！）。

旁註：如果你喜歡 JSX 的思路，並想在 Vue 中使用它，可以使用 babel-plugin-transform-vue-jsx。

框架和庫

Angular 是一個框架而不是一個庫，因為它提供了關於如何構建應用程式的強有力的約束，並且還提供了更多開箱即用的功能。Angular 是一個 “完整的解決方案” - 功能齊全，你可以愉快的開始開發。你不需要研究庫，路由解決方案或類似的東西 - 你只要開始工作就好了。

另一方面，React 和 Vue 是很靈活的。他們的庫可以和各種包搭配。（在 npm 上有很多 React 的包，但 Vue 的包比較少，因為畢竟這個框架還比較新）。有了 React，你甚至可以交換庫本身的 API 相容替代品，如 Inferno。然而，靈活性越大，責任就越大 - React 沒有規則和有限的指導。每個專案都需要決定架構，而且事情可能更容易出錯。

另一方面，Angular 還有一個令人困惑的構建工具，樣板，檢查器（linter）和時間片來處理。如果使用專案初始套件或樣板，React 也是如此。他們自然是非常有幫助的，但是 React 可以開箱即用，這也許是你應該學習的方式。有時，在 JavaScript 環境中工作要使用各種工具被稱為 “Javascript 疲勞症”。Eric Clemmons 在他的文章中說：

當開始使用框架，還有一堆安裝的工具，你可能會不習慣。這些都是框架生成的。很多開發人員不明白，框架內部發生了什麼 —— 或者需要花費很多時間才能搞明白。

Vue 似乎是三個框架中最輕量的。GitLab 有一篇關於 Vue.js（2016 年 10 月）的決定的部落格文章：

Vue.js 完美的兼顧了它將為你做什麼和你需要做什麼。（...）Vue.js 始終是可及的，一個堅固，但靈活的安全網，保證程式設計效率和把操作 DOM 造成的痛苦降到最低。

他們喜歡簡單易用 —— 原始碼非常易讀，不需要任何文件或外部庫。一切都非常簡單。Vue.js “對任何東西都不做大的假設”。還有一個關於 GitLab 決定的播客節目。

另一個來自 Pixeljets 的關於向 Vue 轉變的博文。React “是 JS 界在意識層面向前邁出的一大步，它以一種實用簡潔的方式向人們展示了真正的函數語言程式設計。和 Vue 相比，React 的一大缺點是由於 JSX 的限制，元件的粒度會更小。這裡是文章的引述：

對於我和我的團隊來說，程式碼的可讀性是很重要的，但編寫程式碼很有趣也是非常重要的。在實現真正簡單的計算器小部件時建立 6 個元件並不奇怪。在許多情況下，在維護，修改或對某個小部件進行視覺化檢查方面也是不好的，因為你需要繞過多個檔案/函式並分別檢查每個小塊的 HTML。再次，我不是建議寫巨石 - 我建議在日常開發中使用元件而不是微元件。

關於 Hacker news 和 Reddit 上的部落格文章有趣的討論 - 有來自 Vue 的持異議者和進一步支持者的爭論。

狀態管理和資料繫結

構建使用者介面很困難，因為處處都有狀態 - 隨著時間的推移而變化的資料帶來了複雜性。定義的狀態工作流程對於應用程式的增長和複雜性有很大的幫助。對於複雜度不大的應用程式，就不必定義的狀態流了，像原生 JS 就足夠了。

它是如何工作的？元件在任何時間點描述 UI。當資料改變時，框架重新渲染整個 UI 元件 - 顯示的資料始終是最新的。我們可以把這個概念稱為“ UI 即功能”。

React 經常與 Redux 在一起使用。Redux 以三個基本原則來自述：

單一資料來源（Single source of truth）
State 是隻讀的（State is read-only）
使用純函式執行修改（Changes are made with pure functions）

換句話說：整個應用程式的狀態儲存在單個 store 的狀態樹中。這有助於除錯應用程式，一些功能更容易實現。狀態是隻讀的，只能通過 action 來改變，以避免競爭條件（這也有助於除錯）。編寫 Reducer 來指定如何通過 action 來轉換 state。

大多數教程和樣板檔案都已經整合了 Redux，但是如果沒有它，你可以使用 React（你可能不需要在你的專案中使用 Redux）。Redux 在程式碼中引入了複雜性和相當強的約束。如果你正在學習React，那麼在你要使用 Redux 之前，你應該考慮學習純粹的 React。你絕對應該閱讀 Dan Abramov 的“你可能不需要 Redux”。

有些開發人員建議使用 Mobx 代替 Redux。你可以把它看作是一個 “自動的 Redux”，這使得事情一開始就更容易使用和理解。如果你想了解，你應該從介紹開始。你也可以閱讀 Robin 的 Redux 和 MobX 的比較。他還提供了有關從 Redux 遷移到 MobX 的資訊。如果你想查詢其他 Flux 庫，這個列表非常有用。如果你是來自 MVC 的世界，那麼你應該閱讀 Mikhail Levkovsky 的文章“Redux 中的思考（當你所知道的是 MVC）”。

Vue 可以使用 Redux，但它提供了 Vuex 作為自己的解決方案。

React 和 Angular 之間的巨大差異是 單向與雙向繫結。當 UI 元素（例如，使用者輸入）被更新時，Angular 的雙向繫結改變 model 狀態。React 只有一種方法：先更新 model，然後渲染 UI 元素。Angular 的方式實現起來程式碼更乾淨，開發人員更容易實現。React 的方式會有更好的資料總覽，因為資料只能在一個方向上流動（這使得除錯更容易）。

這兩個概念各有優劣。你需要了解這些概念，並確定這是否會影響你選擇框架。文章“雙向資料繫結：Angular 2 和 React”和這個 Stackoverflow 上的問題都提供了一個很好的解釋。在這裡你可以找到一些互動式的程式碼示例（3 年前的示例（，只適用於 Angular 1 和 React）。最後，Vue 支援單向繫結和雙向繫結（預設為單向繫結）。

如果你想進一步閱讀，這有一篇長文，是有關狀態的不同型別和 Angular 應用程式中的狀態管理（Victor Savkin）。

其他的程式設計概念

Angular 包含依賴注入（dependency injection），即一個物件將依賴項（服務）提供給另一個物件（客戶端）的模式。這導致更多的靈活性和更乾淨的程式碼。文章 “理解依賴注入” 更詳細地解釋了這個概念。

模型 - 檢視 - 控制器模式（MVC）將專案分為三個部分：模型，檢視和控制器。Angular（MVC 模式的框架）有開箱即用的 MVC 特性。React 只有 V —— 你需要自己解決 M 和 C。

靈活性與精簡到微服務

你可以通過僅僅新增 React 或 Vue 的 JavaScript 庫到你的原始碼中的方式去使用它們。但是由於 Angular 使用了 TypeScript，所以不能這樣使用 Angular。

現在我們正在更多地轉向微服務和微應用。React 和 Vue 通過只選擇真正需要的東西，你可以更好地控制應用程式的大小。它們提供了更靈活的方式去把一個老應用的一部分從單頁應用（SPA）轉移到微服務。Angular 最適合單頁應用（SPA），因為它可能太臃腫而不能用於微服務。

正如 Cory House 所說:

JavaScript 發展速度很快，而且 React 可以讓你將應用程式的一小部分替換成更好用的 JS 庫，而不是期待你的框架能夠創新。小巧，可組合的單一用途工具的理念永遠不會過時。

有些人對非單頁的網站也使用 React（例如複雜的表單或嚮導）。甚至 Facebook 都沒有把 React 用在 Facebook 的主頁，而是用在特定的頁面，實現特定的功能。

體積和效能

任何框架都不會十全十美：Angular 框架非常臃腫。gzip 檔案大小為 143k，而 Vue 為 23K，React 為 43k。

為了提高效能，React 和 Vue 都使用了虛擬 DOM（Virtual DOM）。如果你對此感興趣，可以閱讀虛擬 DOM 和 DOM 之間的差異以及 react.js 中虛擬 DOM 的實際優勢。此外，虛擬 DOM 的作者之一在 Stackoverflow 上回答了效能的相關問題。

為了檢查效能，我看了一下最佳的 js 框架基準。你可以自己下載並執行它，或者檢視互動式結果表。

Angular，React 和 Vue 效能比較（原始檔）

記憶體分配（原始檔）

總結一下：Vue 有著很好的效能和高深的記憶體分配技巧。如果比較快慢的話，這些框架都非常接近（比如 Inferno）。請記住，效能基準只能作為考慮的附註，而不是作為判斷標準。

測試

Facebook 使用 Jest 來測試其 React 程式碼。這裡有篇 Jest 和 Mocha 之間的比較的文章 —— 還有一篇關於 Enzyme 和 Mocha 如何一起使用的文章。Enzyme 是 Airbnb 使用的 JavaScript 測試工具（與 Jest，Karma 和其他測試框架一起使用）。如果你想了解更多，有一些關於在 React（這裡和這裡）測試的舊文章。

Angular 2 中使用 Jasmine 作為測試框架。Eric Elliott 在一篇文章中抱怨說 Jasmine “有數百種測試和斷言的方式，需要仔細閱讀每一個，來了解它在做什麼”。輸出也是非常臃腫和難以閱讀。有關 Angular 2 與 Karma 和 Mocha 的整合的一些有用的文章。這裡有一個關於 Angular 2 測試策略的舊視訊（從2015年起）。

Vue 缺乏測試指導，但是 Evan 在 2017 年的展望中寫道，團隊計劃在這方面開展工作。他們推薦使用 Karma。Vue 和 Jest 結合使用，還有 avoriaz 作為測試工具。

通用與原生 app

通用 app 正在將應用程式引入 web、搬上桌面，同樣將深入原生 app 的世界。

React 和 Angular 都支援原生開發。Angular 擁有用於原生應用的 NativeScript（由 Telerik 支援）和用於混合開發的 Ionic 框架。藉助 React，你可以試試 react-native-renderer 來構建跨平臺的 iOS 和 Android 應用程式，或者用 react-native 開發原生 app。許多 app（包括 Facebook；檢視更多的展示）都是用 react-native 構建的。

Javascript 框架在客戶端上渲染頁面。這對於效能，整體使用者體驗和 SEO 是不利的。伺服器端預渲染是一個好辦法。所有這三個框架都有相應的庫來實現服務端渲染。React 有 next.js，Vue 有 nuxt.js，而 Angular 有...... Angular Universal。

學習曲線

Angular 的學習曲線確實很陡。它有全面的文件，但你仍然可能被嚇哭，因為說起來容易做起來難。即使你對 Javascript 有深入的瞭解，也需要了解框架的底層原理。去初始化專案是很神奇的，它會引入很多的包和程式碼。因為有一個大的，預先存在的生態系統，你需要隨著時間的推移學習，這很不利。另一方面，由於已經做出了很多決定，所以在特定情況下可能會很好。對於 React，你可能需要針對第三方庫進行大量重大決策。僅僅 React 中就有 16 種不同的 flux 軟體包來用於狀態管理可供選擇。

Vue 學習起來很容易。公司轉向 Vue 是因為它對初級開發者來說似乎更容易一些。這裡有一片說他們團隊為什麼從 Angular 轉到 Vue的文章。另一位使用者表示，他公司的 React 應用程式非常複雜，以至於新開發人員無法跟上程式碼。有了 Vue，初級和高階開發人員之間的差距縮小了，他們可以更輕鬆地協作，減少 bug，減少解決問題的時間。

有些人說他們用 React 做的東西比用 Vue 做的更好。如果你是一個沒有經驗的 Javascript 開發人員 - 或者如果你在過去十年中主要使用 jQuery，那麼你應該考慮使用 Vue。轉向 React 時，思維方式的轉換更為明顯。Vue 看起來更像是簡單的 Javascript，同時也引入了一些新的概念：元件，事件驅動模型和單向資料流。這同樣是很小的部分。

同時，Angular 和 React 也有自己的實現方式。它們可能會限制你，因為你需要調整自己的做法，才能順暢的開發。這可能是一個缺點，因為你不能隨心所欲，而且學習曲線陡峭。這也可能是一個好處，因為你在學習技術時必須學習正確的概念。用 Vue，你可以用老方法來做。這一開始可能會比較容易上手，但長此以往會出現問題。

在除錯方面，React 和 Vue 的黑魔法更少是一個加分項。找出 bug 更容易，因為需要看的地方少了，堆疊跟蹤的時候，自己的程式碼和那些庫之間有更明顯的區別。使用 React 的人員報告說，他們永遠不必閱讀庫的原始碼。但是，在除錯 Angular 應用程式時，通常需要除錯 Angular 的內部來理解底層模型。從好的一面來看，從 Angular 4 開始，錯誤資訊應該更清晰，更具資訊性。

Angular, React 和 Vue 底層原理

你想自己閱讀原始碼嗎？你想看看事情到底是怎麼樣的嗎？

可能首先要檢視 Github 倉庫: React（github.com/facebook/re…）、Angular（github.com/angular/ang…）和 Vue（github.com/vuejs/vue）。

語法看起來怎麼樣？ValueCoders 比較 Angular，React 和 Vue 的語法。

在生產環境中檢視也很容易 —— 連同底層的原始碼。TodoMVC 列出了幾十個相同的 Todo 應用程式，用不同的 Javascript 框架編寫 —— 你可以比較 Angular，React 和 Vue 的解決方案。RealWorld 建立了一個真實世界的應用程式（中仿），他們已經準備好了 Angular（4+）和 React（帶 Redux ）的解決方案。Vue 的開發正在進行中。

你可以看到許多真實的 app，以下是 React 的方案：

Do（一款很好用的筆記管理 app，用 React 和 Redux 實現）
sound-redux（用 React 和 Redux 實現的 Soundcloud 客戶端）
Brainfock（用 React 實現的專案和團隊管理解決方案）
react-hn 和 react-news（仿 Hacker news）
react-native-whatsapp-ui 和教程（仿 Whatsapp 的 react-native 版）
phoenix-trello（仿 Trello）
slack-clone 和其他教程 (仿Slack)

以下是 Angular 版的 app：

angular2-hn 和 hn-ng2（仿 Hacker News，另一個由 Ashwin Sureshkumar 建立的很好的教程）
Redux-and-angular-2（仿 Twitter）

以下是 Vue 版的 app：

vue-hackernews-2.0 和 Loopa news（仿Hacker News）
vue-soundcloud（Soundcloud 演示）

總結

現在決定使用哪個框架

React，Angular 和 Vue 都很酷，而且沒有一個能明顯的超過對方。相信你的直覺。最後一點有趣的玩世不恭的言辭可能會有助於你的決定：

這個骯髒的小祕密就是大多數 “現代 JavaScript 開發” 與實際構建網站無關 —— 它正在構建可供構建可供人們使用的庫或者包，這些人可以為編寫教程和教授課程的人構建框架。我不確定任何人實際上正在為實際使用者建立任何互動。

當然，這是誇張的，但是可能有一點點道理。是的，Javascript生態系統中有很多雜音。在你搜尋的過程中，你可能會發現很多其他有吸引力的選項 —— 儘量不要被最新，最閃亮的框架矇蔽。

我應該選什麼？

如果你在Google工作：Angular

如果你喜歡 TypeScript：Angular（或 React）

如果你喜歡物件導向程式設計（OOP）: Angular

如果你需要指導手冊，架構和幫助：Angular

如果你在Facebook工作：React

如果你喜歡靈活性：React

如果你喜歡大型的技術生態系統：React

如果你喜歡在幾十個軟體包中進行選擇：React

如果你喜歡JS和“一切都是 Javascript 的方法”：React

如果你喜歡真正乾淨的程式碼：Vue

如果你想要最平緩的學習曲線：Vue

如果你想要最輕量級的框架：Vue

如果你想在一個檔案中分離關注點：Vue

如果你一個人工作，或者有一個小團隊：Vue（或 React）

如果你的應用程式往往變得非常大：Angular（或 React）

如果你想用 react-native 構建一個應用程式：React

如果你想在圈子中有很多的開發者：Angular 或 React

如果你與設計師合作，並需要乾淨的 HTML 檔案：Angular or Vue

如果你喜歡 Vue 但是害怕有限的技術生態系統：React

如果你不能決定，先學習 React，然後 Vue，然後 Angular。

所以，你做出選擇了嗎？

很好！閱讀關於如何開始 Angular，React 或 Vue 開發（即將推出，在 Twitter 上關注我的更新）。