【轉】前端框架天下三分：Angular React 和 Vue的比較

時間 2019-11-09

標籤前端框架天下三分 3分 angular react vue 比較欄目 AngularJS 简体版

原文原文鏈接

前端框架天下三分：Angular React 和 Vue的比較

原文連接：http://blog.csdn.net/haoshidai/article/details/52346865
php

前端這幾年的技術發展很快，細分下來，主要能夠分紅四個方面：html

1.開發語言技術，主要是ES6&7，coffeescript，typescript等；
2.開發框架，如Angular，React,Vue.js，Angular2等；
3.開發工具的豐富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha這些技術；
4.前端開發範圍的擴展，如服務端的nodejs,express,koa,meteor,GraphQL;移動端和跨平臺的PhoneGap,ionic,ReactNative，Weex;計算機圖形學和3維建模領域的WebGL(three.js等)；可視化與數據分析領域的d3.js等；包括瀏覽器不斷開放的更多新特性和接口好比svg,canvas,藍牙，電池，本地存儲，service worker，Houdini等新的API能力，以及像WASM這樣的底層優化技術；前端

就開發框架這塊，Angular(1&2),React,Vue目前佔據着主流地位並且會相持比較長的一段時間，因此這裏對比一下這三門技術，以便以後的技術選型。vue

一數據流

數據綁定

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

實現原理：react

$scope變量中使用髒值檢查來實現。像ember.js是基於setter，getter的觀測機制，webpack

$scope.$watch函數，監視一個變量的變化。函數有三參數，」要觀察什麼」，」在變化時要發生什麼」,以及你要監視的是一個變量仍是一個對象。git

使用ng-model時，你可使用雙向數據綁定。
使用$scope.$watch（視圖到模型）以及$scope.$apply（模型到視圖），還有$scope.$digestangularjs

調用$scope.$watch時只爲它傳遞了一個參數，不管做用域中的什麼東西發生了變化，這個函數都會被調用。在ng-model中，這個函數被用來檢查模型和視圖有沒有同步，若是沒有同步，它將會使用新值來更新模型數據。github

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

$scope.$apply()

$scope.$digest()

$scope.$watch()

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

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

髒檢測的利弊

和ember.js等技術的getter/setter觀測機制相比（優）：
getter/setter當每次對DOM產生變動，它都要修改DOM樹的結構，性能影響大，Angular會把批量操做延時到一次更新，性能相對較好。

和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來管理狀態數據。

二視圖渲染

Angular1

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 都有服務端渲染和原生渲染的功能。

Vue.js 不使用 Virtual DOM 而是使用真實 DOM 做爲模板，數據綁定到真實節點。Vue.js 的應用環境必須提供 DOM。Vue.js 有時性能會比 React 好**，並且幾乎不用手工優化。

三性能與優化

性能方面，這幾個主流框架都應該能夠輕鬆應付大部分常見場景的性能需求，區別在於可優化性和優化對於開發體驗的影響。Vue 的話須要加好 track-by 。React 須要 shouldComponentUpdate 或者全面 Immutable，Angular 2 須要手動指定 change detection strategy。從總體趨勢上來講，瀏覽器和手機還會越變越快，框架自己的渲染性能在整個前端性能優化體系中，會漸漸淡化，更多的優化點仍是在構建方式、緩存、圖片加載、網絡鏈路、HTTP/2 等方面。

四模塊化與組件化

Angular1 -> Angular2

Angular1使用依賴注入來解決模塊之間的依賴問題，模塊幾乎都依賴於注入容器以及其餘相關功能。不是異步加載的，根據依賴列出第一次加載所需的全部依賴。

能夠配合相似於Require.js來實現異步加載，懶加載（按需加載）則是藉助於 ocLazyLoad 方式的解決方案，可是理想狀況下應該是本地框架會更易懂。

Angular2使用ES6的module來定義模塊，也考慮了動態加載的需求。

Vue

Vue中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯**。在 Angular1 中二者有很多相混的地方。

React

一個 React 應用就是構建在 React 組件之上的。
組件有兩個核心概念：props,state。
一個組件就是經過這兩個屬性的值在 render 方法裏面生成這個組件對應的 HTML 結構。

傳統的 MVC 是將模板放在其餘地方，好比 script 標籤或者模板文件，再在 JS 中經過某種手段引用模板。按這種思路，想一想多少次咱們面對四處分散的模板片斷不知所措？糾結模板引擎，糾結模板存放位置，糾結如何引用模板。

React 認爲組件纔是王道，而組件是和模板緊密關聯的，組件模板和組件邏輯分離讓問題複雜化了。因此就有了 JSX 這種語法，就是爲了把 HTML 模板直接嵌入到 JS 代碼裏面，這樣就作到了模板和組件關聯，可是 JS 不支持這種包含 HTML 的語法，因此須要經過工具將 JSX 編譯輸出成 JS 代碼才能使用（能夠進行跨平臺開發的依據，經過不一樣的解釋器解釋成不一樣平臺上運行的代碼，由此能夠有RN和React開發桌面客戶端）。

五語法與代碼風格

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 的單文件組件格式（template,script,style寫在一個vue文件裏做爲一個組件）