Angular React 和 Vue的對比

前端這幾年的技術發展很快，細分下來，主要可以分成四個面向：

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目前佔據著主流地位而且會相持比較長的一段時間，所以這裡比較一下這三門技術，以便之後的技術選型。

一 資料流

資料綁定

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()

在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檔案裡作為一個元件）

以上是Angular React 和 Vue的對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！