React Vue Angular對比

目前，主流前端框架三分天下，主要有React Vue Angular。都有各自的特色，如下簡單介紹一下。

 

 

1.數據流

數據綁定

　　Angular 使用雙向綁定即：界面的操做能實時反映到數據，數據的變動能實時展示到界面。

實現原理

　　$scope變量中使用髒值檢查來實現。像ember.js是基於setter，getter的觀測機制，$scope.$watch函數，監視一個變量的變化。函數有三參數，」要觀察什麼」，」在變化時要發生什麼」,以及你要監視的是一個變量仍是一個對象。使用ng-model時，你可使用雙向數據綁定。 使用$scope.$watch（視圖到模型）以及$scope.$apply（模型到視圖），還有$scope.$digest調用$scope.$watch時只爲它傳遞了一個參數，不管做用域中的什麼東西發生了變化，這個函數都會被調用。在ng-model中，這個函數被用來檢查模型和視圖有沒有同步，若是沒有同步，它將會使用新值來更新模型數據。

實現雙向綁定的三個重要方法：

$scope.$apply()

$scope.$digest()

$scope.$watch()

在Angular雙向綁定中，有2個很重要的概念叫作dirty check，digest loop，dirty check（髒檢測）是用來檢查綁定的scope中的對象的狀態的，例如，在js裏建立了一個對象，而且把這個對象綁定在scope下，這樣這個對象就處於digest loop中，loop經過遍歷這些對象來發現他們是否改變，若是改變就會調用相應的處理方法來實現雙向綁定

Vue 也支持雙向綁定，默認爲單向綁定，數據從父組件單向傳給子組件。在大型應用中使用單向綁定讓數據流易於理解。

 髒檢測的利弊

和Vue相比（劣）：

Vue.js 有更好的性能，而且很是很是容易優化，由於它不使用髒檢查。Angular，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。 Angular 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。Vue.js 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步列隊更新，全部的數據變化都是獨立地觸發，除非它們之間有明確的依賴關係。惟一須要作的優化是在 v-for 上使用 track-by。

 

React-單向數據流

　　MVVM流的Angular和Vue，都是經過相似模板的語法，描述界面狀態與數據的綁定關係，而後經過內部轉換，把這個結構創建起來，當界面發生變化的時候，按照配置規則去更新相應的數據，而後，再根據配置好的規則去，從數據更新界面狀態。

React推崇的是函數式編程和單向數據流：給定原始界面（或數據），施加一個變化，就能推導出另一個狀態（界面或者數據的更新）。

React和Vue均可以配合Redux來管理狀態數據

 

2.視圖渲染

Angular

angularjs的工做原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成爲AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,全部的指令都負責針對view(即HTML中的ng-model)來設置數據綁定。所以, NG框架是在DOM加載完成以後, 纔開始起做用的。

React

　　React 的渲染創建在 Virtual DOM 上——一種在內存中描述 DOM 樹狀態的數據結構。當狀態發生變化時，React 從新渲染 Virtual DOM，比較計算以後給真實 DOM 打補丁。

Virtual DOM 提供了函數式的方法描述視圖，它不使用數據觀察機制，每次更新都會從新渲染整個應用，所以從定義上保證了視圖與數據的同步。它也開闢了 JavaScript 同構應用的可能性。

在超大量數據的首屏渲染速度上，React 有必定優點，由於 Vue 的渲染機制啓動時候要作的工做比較多，並且 React 支持服務端渲染。

React 的 Virtual DOM 也須要優化。複雜的應用裏能夠選擇 1. 手動添加 shouldComponentUpdate 來避免不須要的 vdom re-render；2. Components 儘量都用 pureRenderMixin，而後採用 Flux 結構 + Immutable.js。其實也不是那麼簡單的。相比之下，Vue 因爲採用依賴追蹤，默認就是優化狀態：動了多少數據，就觸發多少更新，很少也很多。

React 和 Angular 2 都有服務端渲染和原生渲染的功能。

 

3.學習成本

　　Angular的學習成本較高,Angular 2中，它的開始指南中所用的就有 ES2015 標準的 JavaScript，18個 NPM 依賴包，4 個文件和超過 3 千多字的介紹，這一切都是爲了完成個 Hello World，甚至須要掌握TypeScript。Vue與React則是簡簡單的使用方法，便於剛入門的人員學習。React使用了JSX語法特性，可是React全部的內容都跟嵌套在js中，而在js中維護大量Html與Css是一件很痛苦的事兒。而Vue則無需學習新的語法特性，傳統的js語法與html便可使用。Angular入門使用難度稍高。所以從上手容易度來講，Vue是最簡單易用的。Angular與Vue都具有數據雙向綁定的功能，這在在最經常使用的取值,以及dom操做中，可以大大減小開發人員的工做量以及出錯機率。

語法與用法　

　　React,Vue,Angular2都支持ES6，Angular2官方擁抱了TypeScript這種 javascript 風格。

　　React 以 JavaScript 爲中心，Angular 2 依然保留以 HTML 爲中心。Angular 2 將 「JS」 嵌入 HTML。React 將 「HTML」 嵌入 JS。Angular 2 沿用了 Angular 1 試圖讓 HTML 更強大的方式。

　　React 推薦的作法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進 JavaScript 了。Vue 的默認 API 是以簡單易上手爲目標，可是進階以後推薦的是使用 webpack + vue-loader 的單文件組件格式

　　React的Demo使用

　　

　　Vue的Demo使用

 

4.性能優化

　　在絕大部分常見頁面中，他們的表現相差不大。在大小方面，雖然 Angular 2 使代碼體積減少了許多，但包含編譯器和所有功能的 Vue2(23kb) 相比 Angular 2(50kb) 仍是要小的多。並且，用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒有用到的功能，但隨着功能引入的不斷增多，尺寸會變得愈來愈大。React通常則須要引入至少兩個文件，且體積幾乎是Vue兩倍。所以對於網絡較爲珍貴的傳輸中，Vue更佔優點。在運行速度上，Vue與React都採用了虛擬Dom的方式，先進行差別化計算，得出最小的修改dom的節點再進行對真實Dom的操做，性能更高。而Vue與React通過測試，一樣Vue更快。在應用的狀態(數據)發生變化後，Vue與React都提供了各自的算法進行Dom的同步。Vue的核心開發者提供了一個benchmark測試，測試方法是將含有10000個項目的列表渲染100次，結果以下圖

 

5.生態

　　React由FaceBook於2013年開源並維護。

　　Angular誕生與2009年，其後由Google收購維護。

　　Vue由我的尤雨溪開發維護。從最初的生態來說，Angular與React有大公司做爲支持，且有不少文檔與項目，生態圈更爲龐大。以後的Vue發展迅猛，其設計目的，是爲了簡約實用原則，夠小夠強大，所以 受到了更多人的使用。如今的Vue生態圈在迅速發展。而對於他們的選擇上，若是有較多重複代碼，或者須要使用模板，傾向於能用，簡單就好，或者想要更輕快，選擇Vue更爲合適。若是須要構建大型應用，或者爲了在不一樣平臺Android，IOS都使用同一套代碼，建議使用React Native。

 

 

通過綜合對比，從使用的容易度，性能，以及之後的發展，建議使用vue進行開發。