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

本文當時寫在本地，發(fā)現(xiàn)換電腦很不是方便，在這里記錄下。

2018/07/23

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

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

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

庫

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

框架

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

需要庫/框架？

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

Angular

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

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

React

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

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

Vue

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

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

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

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

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

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

Angular 依賴于 TypeScript

React 專注于使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

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

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

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

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

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

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

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

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

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

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

單一數(shù)據(jù)源（Single source of truth）

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

使用純函數(shù)執(zhí)行修改（Changes are made with pure functions）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Angular 擁有用于原生應(yīng)用的?NativeScript（由 Telerik 支持）和用于混合開發(fā)的 Ionic 框架。

借助 React， 用?react-native?開發(fā)原生 app。

Vue 可以說擁有Weex開發(fā)原生 app。

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

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

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

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

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

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

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

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

如果你在Google工作：Angular

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

如果你喜歡面向?qū)ο缶幊蹋∣OP）: Angular

如果你需要指導(dǎo)手冊，架構(gòu)和幫助：Angular

如果你在Facebook工作：React

如果你喜歡靈活性：React

如果你喜歡大型的技術(shù)生態(tài)系統(tǒng)：React

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

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

如果你喜歡真正干凈的代碼：Vue

如果你想要最平緩的學(xué)習(xí)曲線：Vue

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

如果你想在一個文件中分離關(guān)注點：Vue

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

如果你的應(yīng)用程序往往變得非常大：Angular（或 React）

如果你想用 react-native 構(gòu)建一個應(yīng)用程序：React

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

如果你與設(shè)計師合作，并需要干凈的 HTML 文件：Angular or Vue

如果你喜歡 Vue 但是害怕有限的技術(shù)生態(tài)系統(tǒng)：React

如果你不能決定，先學(xué)習(xí) React，然后 Vue，然后 Angular。

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

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