轉(zhuǎn)載路徑：（http://blog.csdn.net/haoshidai/article/details/52346865）
前端這幾年的技術(shù)發(fā)展很快，細(xì)分下來(lái)，主要可以分成四個(gè)方面：
1.開(kāi)發(fā)語(yǔ)言技術(shù)，主要是ES6&7，coffeescript，typescript等； 2.開(kāi)發(fā)框架，如Angular，React,Vue.js，Angular2等； 3.開(kāi)發(fā)工具的豐富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha這些技術(shù)； 4.前端開(kāi)發(fā)范圍的擴(kuò)展，如服務(wù)端的nodejs,express,koa,meteor,GraphQL;移動(dòng)端和跨平臺(tái)的PhoneGap,ionic,ReactNative，Weex;計(jì)算機(jī)圖形學(xué)和3維建模領(lǐng)域的WebGL(three.js等)；可視化與數(shù)據(jù)分析領(lǐng)域的d3.js等；包括瀏覽器不斷開(kāi)放的更多新特性和接口比如svg,canvas,藍(lán)牙，電池，本地存儲(chǔ)，service worker，Houdini等新的API能力，以及像WASM這樣的底層優(yōu)化技術(shù)；
就開(kāi)發(fā)框架這塊，Angular(1&2),React,Vue目前占據(jù)著主流地位而且會(huì)相持比較長(zhǎng)的一段時(shí)間，所以這里對(duì)比一下這三門(mén)技術(shù)，以便之后的技術(shù)選型。
一 數(shù)據(jù)流
數(shù)據(jù)綁定
Angular 使用雙向綁定即：界面的操作能實(shí)時(shí)反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。
實(shí)現(xiàn)原理：
$scope
變量中使用臟值檢查來(lái)實(shí)現(xiàn)。像ember.js是基于setter，getter的觀測(cè)機(jī)制，
$scope.$watch
函數(shù)，監(jiān)視一個(gè)變量的變化。函數(shù)有三參數(shù)，”要觀察什么”，”在變化時(shí)要發(fā)生什么”,以及你要監(jiān)視的是一個(gè)變量還是一個(gè)對(duì)象。
使用ng-model時(shí)，你可以使用雙向數(shù)據(jù)綁定。 使用$scope.$watch
（視圖到模型）以及$scope.$apply
（模型到視圖），還有$scope.$digest

調(diào)用$scope.$watch
時(shí)只為它傳遞了一個(gè)參數(shù)，無(wú)論作用域中的什么東西發(fā)生了變化，這個(gè)函數(shù)都會(huì)被調(diào)用。在ng-model中，這個(gè)函數(shù)被用來(lái)檢查模型和視圖有沒(méi)有同步，如果沒(méi)有同步，它將會(huì)使用新值來(lái)更新模型數(shù)據(jù)。
雙向綁定的三個(gè)重要方法：
$scope.$apply()$scope.$digest()$scope.$watch()

在AngularJS雙向綁定中，有2個(gè)很重要的概念叫做dirty check，digest loop，dirty check（臟檢測(cè)）是用來(lái)檢查綁定的scope中的對(duì)象的狀態(tài)的，例如，在js里創(chuàng)建了一個(gè)對(duì)象，并且把這個(gè)對(duì)象綁定在scope下，這樣這個(gè)對(duì)象就處于digest loop中，loop通過(guò)遍歷這些對(duì)象來(lái)發(fā)現(xiàn)他們是否改變，如果改變就會(huì)調(diào)用相應(yīng)的處理方法來(lái)實(shí)現(xiàn)雙向綁定
Vue 也支持雙向綁定，默認(rèn)為單向綁定，數(shù)據(jù)從父組件單向傳給子組件。在大型應(yīng)用中使用單向綁定讓數(shù)據(jù)流易于理解。
臟檢測(cè)的利弊
和ember.js等技術(shù)的getter/setter觀測(cè)機(jī)制相比（優(yōu)）： getter/setter當(dāng)每次對(duì)DOM產(chǎn)生變更，它都要修改DOM樹(shù)的結(jié)構(gòu)，性能影響大，Angular會(huì)把批量操作延時(shí)到一次更新，性能相對(duì)較好。
和Vue相比（劣）：
Vue.js 有更好的性能，并且非常非常容易優(yōu)化，因?yàn)樗?strong>不使用臟檢查。Angular，當(dāng) watcher 越來(lái)越多時(shí)會(huì)變得越來(lái)越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。 Angular 用戶(hù)常常要使用深?yuàn)W的技術(shù)，以解決臟檢查循環(huán)的問(wèn)題。有時(shí)沒(méi)有簡(jiǎn)單的辦法來(lái)優(yōu)化有大量 watcher 的作用域。Vue.js 則根本沒(méi)有這個(gè)問(wèn)題，因?yàn)樗?strong>使用基于依賴(lài)追蹤的觀察系統(tǒng)并且異步列隊(duì)更新，所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)，除非它們之間有明確的依賴(lài)關(guān)系。唯一需要做的優(yōu)化是在 v-for 上使用 track-by。
React-單向數(shù)據(jù)流
MVVM流的Angular和Vue，都是通過(guò)類(lèi)似模板的語(yǔ)法，描述界面狀態(tài)與數(shù)據(jù)的綁定關(guān)系，然后通過(guò)內(nèi)部轉(zhuǎn)換，把這個(gè)結(jié)構(gòu)建立起來(lái)，當(dāng)界面發(fā)生變化的時(shí)候，按照配置規(guī)則去更新相應(yīng)的數(shù)據(jù)，然后，再根據(jù)配置好的規(guī)則去，從數(shù)據(jù)更新界面狀態(tài)。
React推崇的是函數(shù)式編程和單向數(shù)據(jù)流：給定原始界面（或數(shù)據(jù)），施加一個(gè)變化，就能推導(dǎo)出另外一個(gè)狀態(tài)（界面或者數(shù)據(jù)的更新）。
React和Vue都可以配合Redux來(lái)管理狀態(tài)數(shù)據(jù)。
二 視圖渲染
Angular1
AngularJS的工作原理是:HTML模板將會(huì)被瀏覽器解析到DOM中, DOM結(jié)構(gòu)成為AngularJS編譯器的輸入。AngularJS將會(huì)遍歷DOM模板, 來(lái)生成相應(yīng)的NG指令,所有的指令都負(fù)責(zé)針對(duì)view(即HTML中的ng-model)來(lái)設(shè)置數(shù)據(jù)綁定。因此, NG框架是在DOM加載完成之后, 才開(kāi)始起作用的。
React
React 的渲染建立在 Virtual DOM 上——一種在內(nèi)存中描述 DOM 樹(shù)狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。當(dāng)狀態(tài)發(fā)生變化時(shí)，React 重新渲染 Virtual DOM，比較計(jì)算之后給真實(shí) DOM 打補(bǔ)丁。
Virtual DOM 提供了函數(shù)式的方法描述視圖，它不使用數(shù)據(jù)觀察機(jī)制，每次更新都會(huì)重新渲染整個(gè)應(yīng)用，因此從定義上保證了視圖與數(shù)據(jù)的同步。它也開(kāi)辟了 JavaScript 同構(gòu)應(yīng)用的可能性。
在超大量數(shù)據(jù)的首屏渲染速度上，React 有一定優(yōu)勢(shì)，因?yàn)?Vue 的渲染機(jī)制啟動(dòng)時(shí)候要做的工作比較多，而且 React 支持服務(wù)端渲染。
React 的 Virtual DOM 也需要優(yōu)化。復(fù)雜的應(yīng)用里可以選擇 1. 手動(dòng)添加 shouldComponentUpdate 來(lái)避免不需要的 vdom re-render；2. Components 盡可能都用 pureRenderMixin，然后采用 Flux 結(jié)構(gòu) + Immutable.js。其實(shí)也不是那么簡(jiǎn)單的。相比之下，Vue 由于采用依賴(lài)追蹤，默認(rèn)就是優(yōu)化狀態(tài)：動(dòng)了多少數(shù)據(jù)，就觸發(fā)多少更新，不多也不少。
React 和 Angular 2 都有服務(wù)端渲染和原生渲染的功能。
Vue.js 不使用 Virtual DOM 而是使用真實(shí) DOM 作為模板，數(shù)據(jù)綁定到真實(shí)節(jié)點(diǎn)。Vue.js 的應(yīng)用環(huán)境必須提供 DOM。Vue.js 有時(shí)性能會(huì)比 React 好，而且?guī)缀醪挥檬止?yōu)化。
三 性能與優(yōu)化
性能方面，這幾個(gè)主流框架都應(yīng)該可以輕松應(yīng)付大部分常見(jiàn)場(chǎng)景的性能需求，區(qū)別在于可優(yōu)化性和優(yōu)化對(duì)于開(kāi)發(fā)體驗(yàn)的影響。Vue 的話(huà)需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable，Angular 2 需要手動(dòng)指定 change detection strategy。從整體趨勢(shì)上來(lái)說(shuō)，瀏覽器和手機(jī)還會(huì)越變?cè)娇欤蚣鼙旧淼匿秩拘阅茉谡麄€(gè)前端性能優(yōu)化體系中，會(huì)漸漸淡化，更多的優(yōu)化點(diǎn)還是在構(gòu)建方式、緩存、圖片加載、網(wǎng)絡(luò)鏈路、HTTP/2 等方面。
四 模塊化與組件化
Angular1 -> Angular2
Angular1使用依賴(lài)注入來(lái)解決模塊之間的依賴(lài)問(wèn)題，模塊幾乎都依賴(lài)于注入容器以及其他相關(guān)功能。不是異步加載的，根據(jù)依賴(lài)列出第一次加載所需的所有依賴(lài)。
可以配合類(lèi)似于Require.js來(lái)實(shí)現(xiàn)異步加載，懶加載（按需加載）則是借助于 ocLazyLoad 方式的解決方案，但是理想情況下應(yīng)該是本地框架會(huì)更易懂。
Angular2使用ES6的module來(lái)定義模塊，也考慮了動(dòng)態(tài)加載的需求。
Vue
Vue中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular1 中兩者有不少相混的地方。
React
一個(gè) React 應(yīng)用就是構(gòu)建在 React 組件之上的。 組件有兩個(gè)核心概念：props,state。 一個(gè)組件就是通過(guò)這兩個(gè)屬性的值在 render 方法里面生成這個(gè)組件對(duì)應(yīng)的 HTML 結(jié)構(gòu)。
傳統(tǒng)的 MVC 是將模板放在其他地方，比如 script 標(biāo)簽或者模板文件，再在 JS 中通過(guò)某種手段引用模板。按這種思路，想想多少次我們面對(duì)四處分散的模板片段不知所措？糾結(jié)模板引擎，糾結(jié)模板存放位置，糾結(jié)如何引用模板。
React 認(rèn)為組件才是王道，而組件是和模板緊密關(guān)聯(lián)的，組件模板和組件邏輯分離讓問(wèn)題復(fù)雜化了。所以就有了 JSX 這種語(yǔ)法，就是為了把 HTML 模板直接嵌入到 JS 代碼里面，這樣就做到了模板和組件關(guān)聯(lián)，但是 JS 不支持這種包含 HTML 的語(yǔ)法，所以需要通過(guò)工具將 JSX 編譯輸出成 JS 代碼才能使用（可以進(jìn)行跨平臺(tái)開(kāi)發(fā)的依據(jù)，通過(guò)不同的解釋器解釋成不同平臺(tái)上運(yùn)行的代碼，由此可以有RN和React開(kāi)發(fā)桌面客戶(hù)端）。
五 語(yǔ)法與代碼風(fēng)格
React,Vue,Angular2都支持ES6，Angular2官方擁抱了TypeScript這種 JavaScript 風(fēng)格。
React 以 JavaScript 為中心，Angular 2 依然保留以 HTML 為中心。Angular 2 將 “JS” 嵌入 HTML。React 將 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 試圖讓 HTML 更強(qiáng)大的方式。
React 推薦的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進(jìn) JavaScript 了。Vue 的默認(rèn) API 是以簡(jiǎn)單易上手為目標(biāo)，但是進(jìn)階之后推薦的是使用 webpack + vue-loader 的單文件組件格式（template,script,style寫(xiě)在一個(gè)vue文件里作為一個(gè)組件）
六 相關(guān)文章資料匯總：
[譯] Angular 2 VS. React： 血色將至： http://www.w3ctech.com/topic/1675
[原譯] React vs Angular 2: 戰(zhàn)爭(zhēng)繼續(xù)： http://jixianqianduan.com/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html
Vue.js 對(duì)比其它框架: 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學(xué)習(xí)哪個(gè)好？ https://www.zhihu.com/question/39943474
React 簡(jiǎn)介和原理： http://anjia.github.io/2015/07/24/fe_react/
浴火重生的Angular: https://github.com/xufei/blog/issues/9
React 入門(mén)教程： https://hulufei.gitbooks.io/react-tutorial/content/
Vue.js官方文檔： https://vuejs.org.cn/guide/
Angular2中文文檔： https://angular.cn/docs/ts/latest/tutorial/
本文的話(huà)題實(shí)際上很大，需要對(duì)Angular,React和Vue三門(mén)技術(shù)有足夠深入的了解，所以難免有很多總結(jié)的不全或者不夠深入的地方，后續(xù)我會(huì)不斷完善和修改。