摘要：由進行開發和維護，代發布于年月，現在主要是。狀態是只讀的，只能通過來改變，以避免競爭條件這也有助于調試。文件大小為，而為，為。請記住，性能基準只能作為考慮的附注，而不是作為判斷標準。使用的人員報告說，他們永遠不必閱讀庫的源代碼。

本文當時寫在本地，發現換電腦很不是方便，在這里記錄下。

2018/07/23

2016年，對于JavaScript來說輝煌的一年。開發框架大量涌入，讓開發者有了更多的選擇。到了2018年就目前火熱程度來說，angular，react，vue 仍占據著主流地位。

對比這3個框架，孰優孰劣真的會讓選擇困難癥的人頭痛不已。

參考本文，希望會對你有所幫助。

庫

被設計來執行一些特定的任務，而且通常并不復雜。因此，如果我們使用庫來構建我們的應用程序，那么我們需要為每個任務選擇一個庫，以及設置任務運行者。
庫的主要優點是我們可以完全控制應用程序。但問題是建立該項目需要更多的時間。

框架

被設計用于執行更復雜的事情。因此，如果我們使用框架，那么它會自動為我們解決很多問題。每個框架都有一個預定義的設計或結構，包括許多庫和設置跑步者。
框架的主要優點是開發過程要快得多，因為它包含了我們執行不同任務所需的所有可能的庫。但是一個框架比圖書館有更嚴格的設計。

需要庫/框架？

庫是我們需要的，不依賴庫的人，太強大，不做討論。
雖然無框架也是可以正常工作的，但是這是有代價的。
對于一個項目，它是由開發周期的，俗稱的小項目，即開發周期短，那么添加框架反而是多余；相反開發周期長，那么一個好的框架將會更加的合適。
當然，如果你是一個有著深厚技術和經驗的人，確實可以坦誠的不使用框架。但你團隊的其他成員呢？你手下的那些人呢？或者當你的決定把你自己陷入困境的時候呢？這種情況下，我們將會看到一個不用框架的團隊在展開冒險，最后他們會發現自己創建了一個需要自己著手維護的框架。

Angular

將自己描述為“超級厲害的 JavaScript?MVW 框架” 
現在所說的angular通常指的是 angular2+，特質 angular1代會說明 angular1（2010年10月發布）。
由 Google 進行開發和維護 ，2代發布于2016年9月，現在主要是angular4。
遵守 MIT license 
優勢：

angular最大的優勢在于它的流行程度，雖然在國內 react  和 vue 更加的火熱。
對于用戶來說它有一套用于構建用戶界面的豐富組件
鑒于國人多數使用的是angular1.x ，它在api上比較全面，功能比較完善

React

將自己描述為 “用于構建用戶界面的 JavaScript 庫” 
由 Facebook 進行開發和維護，發布于2013年3月。
開始遵守?BSD3-license（證書說明：Facebook 的專利授權是在保護自己免受專利訴訟的能力的同時分享其代碼。有些人聲稱，如果你的公司不打算起訴 Facebook，那么使用 React 是可以的 ）
后期更改蹲守 MIT license 
優勢：

React + Redux?模式在于它們相對簡單和專注，做一件事情并把它做好 是非常困難的，但這兩個庫都很有效地完成了它們的目標
組件發生變化，它會以該組件為根，重新渲染整個組件子樹

Vue

2014年還沒有人聽說過vuejs，但是在2015年已經開始和angular，react相提并論，脫離了小眾型的框架。2016年發展最迅速的js框架之一
將自己描述為“用于構建直觀，快速和組件化交互式界面的?MVVM?框架” 
由 Google 前員工?Evan You?發布，時間2014年2月，2016年版本2發布。
遵守 MIT license
優勢：

一個簡潔而且合理的架構，使得它易于理解和構建（國內的文檔豐富清晰，有一個強大的充滿激情人群的社區，這為?vue.js?增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易）
使用基于依賴追蹤的觀察系統并且異步更新，左右的數據變化都是獨立觸發

Angular 和 React 得到了諸如 Facebook ，Google，Whatsapp 等大公司的支持和使用。目前，Google 在他們的很多項目中使用Angular，例如 AdWords UI（用Angular和Dart實現）。

Vue 主要用于小型項目的個人。阿里巴巴，百度，Expedia，任天堂，GitLab 使用 —?可在?madewithvuejs.com?找到一些小型項目的列表。

一個組件得到一個輸入，并且在一些內部的行為/計算之后，它返回一個渲染的 UI 模板（一個登錄/注銷區或一個待辦事項列表項）作為輸出。定義的組件應該易于在網頁或其他組件中重用 。

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

Angular 依賴于 TypeScript

React 專注于使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

與整個 JavaScript 語言相比，TypeScript 的用戶群仍然很小。一個風險可能是你正在向錯誤的方向發展，因為 TypeScript 可能 - 也許不太可能 - 隨著時間的推移也會消失。此外，TypeScript 為項目增加了很多（學習）開銷 - 你可以在 Eric Elliott 的 Angular 2 vs. React 比較 中閱讀更多關于這方面的內容。

幾十年來，開發人員試圖分離 UI 模板和內聯的 Javascript 邏輯，但是使用 JSX，這些又被混合了 。

JSX 是一個類似 HTML 語法的可選預處理器，并隨后在 JavaScript 中進行編譯。JSX 有一些怪癖 —— 例如，你需要使用 className 而不是 class，因為后者是 Javascript 的保留字。JSX 對于開發來說是一個很大的優勢，因為代碼寫在同一個地方，可以在代碼完成和編譯時更好地檢查工作成果。當你在 JSX 中輸入錯誤時，React 將不會編譯，并打印輸出錯誤的行號。

JSX 意味著 React 中的所有內容都是 Javascript -- 用于JSX模板和邏輯

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

Vue 具有“單個文件組件”。這似乎是對于關注分離的權衡 - 模板，腳本和樣式在一個文件中，但在三個不同的有序部分中。

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

React 和 Vue 是很靈活的。他們的庫可以和各種包搭配。 靈活性越大，責任就越大 - React 沒有規則和有限的指導。每個項目都需要決定架構，而且事情可能更容易出錯。

Vue 似乎是三個框架中最輕量的。 源代碼非常易讀，不需要任何文檔或外部庫。

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

單一數據源（Single source of truth）

State 是只讀的（State is read-only）

使用純函數執行修改（Changes are made with pure functions）

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

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

React 和 Angular 之間的巨大差異是?單向與雙向綁定。

當 UI 元素（例如，用戶輸入）被更新時，Angular 的雙向綁定改變 model 狀態。React 只有一種方法：先更新 model，然后渲染 UI 元素。Angular 的方式實現起來代碼更干凈，開發人員更容易實現。React 的方式會有更好的數據總覽，因為數據只能在一個方向上流動（這使得調試更容易）。

最后，Vue 支持單向綁定和雙向綁定（默認為單向綁定）。

Angular 包含依賴注入（dependency injection），即一個對象將依賴項（服務）提供給另一個對象（客戶端）的模式。這導致更多的靈活性和更干凈的代碼。

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

你可以通過僅僅添加 React 或 Vue 的 JavaScript 庫到你的源碼中的方式去使用它們。但是由于 Angular 使用了 TypeScript，所以不能這樣使用 Angular。

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

Angular 框架非常臃腫。gzip 文件大小為 143k，而 Vue 為 23K，React 為 43k。

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

Vue 有著很好的性能和高深的內存分配技巧。如果比較快慢的話，這些框架都非常接近（比如?Inferno）。請記住，性能基準只能作為考慮的附注，而不是作為判斷標準。

Facebook?使用 Jest?來測試其 React 代碼。

Angular 2 中使用?Jasmine?作為測試框架。

Vue 缺乏測試指導， 但是 Evan 團隊推薦使用?Karma。

Angular 擁有用于原生應用的?NativeScript（由 Telerik 支持）和用于混合開發的 Ionic 框架。

借助 React， 用?react-native?開發原生 app。

Vue 可以說擁有Weex開發原生 app。

Angular 的學習曲線確實很陡。它有全面的文檔，但你仍然可能被嚇哭，因為說起來容易做起來難。即使你對 Javascript 有深入的了解，也需要了解框架的底層原理。

對于 React，你可能需要針對第三方庫進行大量重大決策。僅僅 React 中就有 16 種不同的 flux 軟件包來用于狀態管理可供選擇 。

Vue 學習起來很容易。公司轉向 Vue 是因為它對初級開發者來說似乎更容易一些。有了 Vue，初級和高級開發人員之間的差距縮小了，他們可以更輕松地協作，減少 bug，減少解決問題的時間。

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

如果你想檢查源代碼，那么你可以訪問下面的GitHub倉庫：

Angular：https://github.com/angular/an...

React：https://github.com/facebook/r...

Vue：https://github.com/vuejs/vue

如果你在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。

[[譯] 2017 年比較 Angular、React、Vue 三劍客](https://juejin.im/post/5a0d5d...

6 大主流 Web 框架優缺點對比
React、Angular和Vue三種最流行的前端框架哪一個最好？