前端開發(fā)

2017年最主流前端框架比較：Angular、React 和 Vue

8694

如果你是一名前端開發(fā)人員，或者是想要學習web前端開發(fā)技術(shù)的小伙伴，必須要了解的這三款最主流的前端框架。不僅可以幫助你拿到高薪，也能夠提升你的編程思想。

vue

angular官網(wǎng)：https://angularjs.org/

React 官網(wǎng)：https://facebook.github.io/react/

Vue官網(wǎng)：https://cn.vuejs.org/

目前前端開發(fā)技術(shù)主要可以分成四個方面：

1、前端開發(fā)語言技術(shù) ??

主要是ES6&7，coffeescript，typescript等語法糖；

2、前端開發(fā)框架?，

如Angular，React, ?Vue.js，Angular2等；

3、開發(fā)工具的豐富和前端工程化，

像Grunt，Gulp，Webpack，npm，eslint，mocha這些技術(shù)；

4、前端開發(fā)范圍的擴展，

如服務端的nodejs,express,koa,meteor,GraphQL;

移動端和跨平臺的PhoneGap,ionic,ReactNative，Weex;

計算機圖形學和3維建模領域的WebGL(three.js等)；可視化與數(shù)據(jù)分析領域的d3.js等；

包括瀏覽器不斷開放的更多新特性和接口比如svg,canvas,藍牙，電池，本地存儲，service worker，Houdini等新的API能力，以及像WASM這樣的底層優(yōu)化技術(shù)；

就開發(fā)框架這塊，Angular(1&2) ?,React, ? Vue目前占據(jù)著主流地位而且會相持比較長的一段時間，所以這里對比一下這三門技術(shù)，以便之后的技術(shù)選型。

也是目前最主流的三大前端框架。下面25學堂的小編就來跟大家一一比較一下這三款主流前端框架的各自的優(yōu)缺點。

一、數(shù)據(jù)流

數(shù)據(jù)綁定方面的比較

Angular 使用雙向綁定即：界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。

實現(xiàn)原理：

$scope變量中使用臟值檢查來實現(xiàn)。像ember.js是基于setter，getter的觀測機制，

$scope.$watch函數(shù)，監(jiān)視一個變量的變化。函數(shù)有三參數(shù)，”要觀察什么”，”在變化時要發(fā)生什么”,以及你要監(jiān)視的是一個變量還是一個對象。

使用ng-model時，你可以使用雙向數(shù)據(jù)綁定。

使用$scope.$watch（視圖到模型）以及$scope.$apply（模型到視圖），還有$scope.$digest

調(diào)用$scope.$watch時只為它傳遞了一個參數(shù)，無論作用域中的什么東西發(fā)生了變化，這個函數(shù)都會被調(diào)用。在ng-model中，這個函數(shù)被用來檢查模型和視圖有沒有同步，如果沒有同步，它將會使用新值來更新模型數(shù)據(jù)。

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

$scope.$apply()

$scope.$digest()

$scope.$watch()

在AngularJS雙向綁定中，有2個很重要的概念叫做dirty check，digest loop，dirty check（臟檢測）是用來檢查綁定的scope中的對象的狀態(tài)的，例如，在js里創(chuàng)建了一個對象，并且把這個對象綁定在scope下，這樣這個對象就處于digest loop中，loop通過遍歷這些對象來發(fā)現(xiàn)他們是否改變，如果改變就會調(diào)用相應的處理方法來實現(xiàn)雙向綁定

Vue?也支持雙向綁定，默認為單向綁定，數(shù)據(jù)從父組件單向傳給子組件。在大型應用中使用單向綁定讓數(shù)據(jù)流易于理解。

臟檢測的利弊

和ember.js等技術(shù)的getter/setter觀測機制相比（優(yōu)）：

getter/setter當每次對DOM產(chǎn)生變更，它都要修改DOM樹的結(jié)構(gòu)，性能影響大，Angular會把批量操作延時到一次更新，性能相對較好。

和Vue相比（劣）：

Vue.js 有更好的性能，并且非常非常容易優(yōu)化，因為它不使用臟檢查。Angular，當 watcher 越來越多時會變得越來越慢，因為作用域內(nèi)的每一次變化，所有 watcher 都要重新計算。并且，如果一些 watcher 觸發(fā)另一個更新，臟檢查循環(huán)（digest cycle）可能要運行多次。

Angular 用戶常常要使用深奧的技術(shù)，以解決臟檢查循環(huán)的問題。有時沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。

Vue.js?則根本沒有這個問題，因為它使用基于依賴追蹤的觀察系統(tǒng)并且異步列隊更新，所有的數(shù)據(jù)變化都是獨立地觸發(fā)，除非它們之間有明確的依賴關系。

唯一需要做的優(yōu)化是在 v-for 上使用 track-by。

React-單向數(shù)據(jù)流

MVVM流的Angular和Vue，都是通過類似模板的語法，描述界面狀態(tài)與數(shù)據(jù)的綁定關系，然后通過內(nèi)部轉(zhuǎn)換，把這個結(jié)構(gòu)建立起來，當界面發(fā)生變化的時候，按照配置規(guī)則去更新相應的數(shù)據(jù)，然后，再根據(jù)配置好的規(guī)則去，從數(shù)據(jù)更新界面狀態(tài)。

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

React和Vue都可以配合Redux來管理狀態(tài)數(shù)據(jù)。

二部分比較：視圖渲染

Angular1

AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結(jié)構(gòu)成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,所有的指令都負責針對view(即HTML中的ng-model)來設置數(shù)據(jù)綁定。因此, NG框架是在DOM加載完成之后, 才開始起作用的。

React

React 的渲染建立在 Virtual DOM 上——一種在內(nèi)存中描述 DOM 樹狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。當狀態(tài)發(fā)生變化時，React 重新渲染 Virtual DOM，比較計算之后給真實 DOM 打補丁。

Virtual DOM?提供了函數(shù)式的方法描述視圖，它不使用數(shù)據(jù)觀察機制，每次更新都會重新渲染整個應用，因此從定義上保證了視圖與數(shù)據(jù)的同步。它也開辟了?JavaScript?同構(gòu)應用的可能性。

在超大量數(shù)據(jù)的首屏渲染速度上，React 有一定優(yōu)勢，因為?Vue 的渲染機制啟動時候要做的工作比較多，而且?React 支持服務端渲染。

React 的?Virtual DOM 也需要優(yōu)化。復雜的應用里可以選擇

1. 手動添加?shouldComponentUpdate 來避免不需要的 vdom re-render；

2. Components 盡可能都用 pureRenderMixin，然后采用 Flux 結(jié)構(gòu) + Immutable.js。

其實也不是那么簡單的。相比之下，Vue?由于采用依賴追蹤，默認就是優(yōu)化狀態(tài)：動了多少數(shù)據(jù)，就觸發(fā)多少更新，不多也不少。

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

Vue.js?不使用 Virtual DOM 而是使用真實 DOM 作為模板，數(shù)據(jù)綁定到真實節(jié)點。Vue.js 的應用環(huán)境必須提供 DOM。Vue.js 有時性能會比 React 好**，而且?guī)缀醪挥檬止?yōu)化。

三性能與優(yōu)化

性能方面，這幾個主流框架都應該可以輕松應付大部分常見場景的性能需求，區(qū)別在于可優(yōu)化性和優(yōu)化對于開發(fā)體驗的影響。

Vue 的話需要加好 track-by 。

React 需要 shouldComponentUpdate 或者全面 Immutable，

Angular 2 需要手動指定 change detection strategy。

從整體趨勢上來說，瀏覽器和手機還會越變越快，框架本身的渲染性能在整個前端性能優(yōu)化體系中，會漸漸淡化，更多的優(yōu)化點還是在構(gòu)建方式、緩存、圖片加載、網(wǎng)絡鏈路、HTTP/2 等方面。

四模塊化與組件化

Angular1 -> Angular2

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

可以配合類似于Require.js來實現(xiàn)異步加載，懶加載（按需加載）則是借助于 ocLazyLoad 方式的解決方案，但是理想情況下應該是本地框架會更易懂。

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

Vue

Vue中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數(shù)據(jù)邏輯**。在 Angular1 中兩者有不少相混的地方。

React

一個 React 應用就是構(gòu)建在 React 組件之上的。

組件有兩個核心概念：props,state。

一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應的 HTML 結(jié)構(gòu)。

傳統(tǒng)的 MVC 是將模板放在其他地方，比如 script 標簽或者模板文件，再在 JS 中通過某種手段引用模板。

按這種思路，想想多少次我們面對四處分散的模板片段不知所措？糾結(jié)模板引擎，糾結(jié)模板存放位置，糾結(jié)如何引用模板。

React 認為組件才是王道，而組件是和模板緊密關聯(lián)的，組件模板和組件邏輯分離讓問題復雜化了。所以就有了?JSX 這種語法，就是為了把 HTML 模板直接嵌入到 JS 代碼里面，這樣就做到了模板和組件關聯(lián)，但是 JS 不支持這種包含 HTML 的語法，所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用（可以進行跨平臺開發(fā)的依據(jù)，通過不同的解釋器解釋成不同平臺上運行的代碼，由此可以有RN和React開發(fā)桌面客戶端）。

五語法與代碼風格

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 2 VS. React：血色將至：

http://www.w3ctech.com/topic/1675

[原譯] React vs Angular 2: 戰(zhàn)爭繼續(xù)：

http://jixianqianduan.com/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html

Vue.js 對比其它框架:

https://vuejs.org.cn/guide/comparison.html

Angularjs雙向綁定的研究：

https://www.nihaoshijie.com.cn/index.php/archives/306

Angular 從 1 到 2 快速參考:

https://angular.cn/docs/ts/latest/cookbook/a1-a2-quick-reference.html

知乎：react.js,angular.js,vue.js學習哪個好？