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

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

2018/07/23

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

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

參考本文，希望會(huì)對(duì)你有所幫助。

庫(kù)

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

框架

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

需要庫(kù)/框架？

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

Angular

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

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

React

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

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

Vue

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

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

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

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

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

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

Angular 依賴(lài)于 TypeScript

React 專(zhuān)注于使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

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

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

JSX 是一個(gè)類(lèi)似 HTML 語(yǔ)法的可選預(yù)處理器，并隨后在 JavaScript 中進(jìn)行編譯。JSX 有一些怪癖 —— 例如，你需要使用 className 而不是 class，因?yàn)楹笳呤?Javascript 的保留字。JSX 對(duì)于開(kāi)發(fā)來(lái)說(shuō)是一個(gè)很大的優(yōu)勢(shì)，因?yàn)榇a寫(xiě)在同一個(gè)地方，可以在代碼完成和編譯時(shí)更好地檢查工作成果。當(dāng)你在 JSX 中輸入錯(cuò)誤時(shí)，React 將不會(huì)編譯，并打印輸出錯(cuò)誤的行號(hào)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后，Vue 支持單向綁定和雙向綁定（默認(rèn)為單向綁定）。

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

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

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

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

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

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

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

Facebook?使用 Jest?來(lái)測(cè)試其 React 代碼。

Angular 2 中使用?Jasmine?作為測(cè)試框架。

Vue 缺乏測(cè)試指導(dǎo)， 但是 Evan 團(tuán)隊(duì)推薦使用?Karma。

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

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

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

Angular 的學(xué)習(xí)曲線確實(shí)很陡。它有全面的文檔，但你仍然可能被嚇哭，因?yàn)檎f(shuō)起來(lái)容易做起來(lái)難。即使你對(duì) Javascript 有深入的了解，也需要了解框架的底層原理。

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

Vue 學(xué)習(xí)起來(lái)很容易。公司轉(zhuǎn)向 Vue 是因?yàn)樗鼘?duì)初級(jí)開(kāi)發(fā)者來(lái)說(shuō)似乎更容易一些。有了 Vue，初級(jí)和高級(jí)開(kāi)發(fā)人員之間的差距縮小了，他們可以更輕松地協(xié)作，減少 bug，減少解決問(wèn)題的時(shí)間。

在調(diào)試方面，React 和 Vue 的黑魔法更少是一個(gè)加分項(xiàng)。找出 bug 更容易，因?yàn)樾枰吹牡胤缴倭?，堆棧跟蹤的時(shí)候，自己的代碼和那些庫(kù)之間有更明顯的區(qū)別。使用 React 的人員報(bào)告說(shuō)，他們永遠(yuǎn)不必閱讀庫(kù)的源代碼。但是，在調(diào)試 Angular 應(yīng)用程序時(shí)，通常需要調(diào)試 Angular 的內(nèi)部來(lái)理解底層模型。從好的一面來(lái)看，從 Angular 4 開(kāi)始，錯(cuò)誤信息應(yīng)該更清晰，更具信息性。

如果你想檢查源代碼，那么你可以訪問(wèn)下面的GitHub倉(cāng)庫(kù)：

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)手冊(cè)，架構(gòu)和幫助：Angular

如果你在Facebook工作：React

如果你喜歡靈活性：React

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

如果你喜歡在幾十個(gè)軟件包中進(jìn)行選擇：React

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

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

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

如果你想要最輕量級(jí)的框架：Vue

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

如果你一個(gè)人工作，或者有一個(gè)小團(tuán)隊(duì)：Vue（或 React）

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

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

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

如果你與設(shè)計(jì)師合作，并需要干凈的 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)缺點(diǎn)對(duì)比
React、Angular和Vue三種最流行的前端框架哪一個(gè)最好？