angular，react & vue

時間 2019-11-15

標籤 angular react vue 欄目 AngularJS 简体版

原文原文鏈接

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

angular，react & vue

2018/07/23html

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

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

參考本文，但願會對你有所幫助。java

庫 or 框架

庫react

被設計來執行一些特定的任務，並且一般並不複雜。所以，若是咱們使用庫來構建咱們的應用程序，那麼咱們須要爲每一個任務選擇一個庫，以及設置任務運行者。
庫的主要優勢是咱們能夠徹底控制應用程序。但問題是創建該項目須要更多的時間。git

框架github

被設計用於執行更復雜的事情。所以，若是咱們使用框架，那麼它會自動爲咱們解決不少問題。每一個框架都有一個預約義的設計或結構，包括許多庫和設置跑步者。
框架的主要優勢是開發過程要快得多，由於它包含了咱們執行不一樣任務所需的全部可能的庫。可是一個框架比圖書館有更嚴格的設計。web

須要庫/框架？vuex

庫是咱們須要的，不依賴庫的人，太強大，不作討論。
雖然無框架也是能夠正常工做的，可是這是有代價的。

對於一個項目，它是由開發週期的，俗稱的小項目，即開發週期短，那麼添加框架反而是多餘；相反開發週期長，那麼一個好的框架將會更加的合適。

固然，若是你是一個有着深厚技術和經驗的人，確實能夠坦誠的不使用框架。但你團隊的其餘成員呢？你手下的那些人呢？或者當你的決定把你本身陷入困境的時候呢？這種狀況下，咱們將會看到一個不用框架的團隊在展開冒險，最後他們會發現本身建立了一個須要本身着手維護的框架。

歷史

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 找到一些小型項目的列表。

比較

1. 組件

一個組件獲得一個輸入，而且在一些內部的行爲/計算以後，它返回一個渲染的 UI 模板（一個登陸/註銷區或一個待辦事項列表項）做爲輸出。定義的組件應該易於在網頁或其餘組件中重用。

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

2. Typescript，ES6 與 ES5

Angular 依賴於 TypeScript

React 專一於使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

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

3. 模板 —— JSX 仍是 HTML

幾十年來，開發人員試圖分離 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 具備「單個文件組件」。這彷佛是對於關注分離的權衡 - 模板，腳本和樣式在一個文件中，但在三個不一樣的有序部分中。

4. 性能

Angular 是一個框架而不是一個庫，由於它提供了關於如何構建應用程序的強有力的約束，而且還提供了更多開箱即用的功能。Angular 是一個「完整的解決方案」 - 功能齊全，你能夠愉快的開始開發。你不須要研究庫，路由解決方案或相似的東西 - 你只要開始工做就行了。

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

Vue 彷佛是三個框架中最輕量的。源代碼很是易讀，不須要任何文檔或外部庫。

5. 狀態管理

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 做爲本身的解決方案。

6. 數據綁定

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

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

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

7. 其餘的編程概念

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

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

8. 靈活性與精簡到微服務

你能夠經過僅僅添加 React 或 Vue 的 JavaScript 庫到你的源碼中的方式去使用它們。可是因爲 Angular 使用了 TypeScript，因此不能這樣使用 Angular。

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

9. 體積和性能

Angular 框架很是臃腫。gzip 文件大小爲 143k，而 Vue 爲 23K，React 爲 43k。

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

Vue 有着很好的性能和高深的內存分配技巧。若是比較快慢的話，這些框架都很是接近（好比 Inferno）。請記住，性能基準只能做爲考慮的附註，而不是做爲判斷標準。

10. 測試

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

Angular 2 中使用 Jasmine 做爲測試框架。

Vue 缺少測試指導，可是 Evan 團隊推薦使用 Karma。

11. 通用與原生 app

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

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

Vue 能夠說擁有Weex開發原生 app。

12. 學習曲線

Angular 的學習曲線確實很陡。它有全面的文檔，但你仍然可能被嚇哭，由於提及來容易作起來難。即便你對 Javascript 有深刻的瞭解，也須要了解框架的底層原理。

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

Vue 學習起來很容易。公司轉向 Vue 是由於它對初級開發者來講彷佛更容易一些。有了 Vue，初級和高級開發人員之間的差距縮小了，他們能夠更輕鬆地協做，減小 bug，減小解決問題的時間。

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