摘要：從angular的誕生獨(dú)步天下，到現(xiàn)在三大框架平分天下，基本形勢(shì)已經(jīng)趨于穩(wěn)定。每一個(gè)框架從誕生到受歡迎，都有其特定的原因和背景。不同的開發(fā)者選擇時(shí)，也是依據(jù)于其特定情景下的原因和背景。

一、為什么前端會(huì)被vue,angular,react瓜分？

??不知道大家有沒有發(fā)現(xiàn)，這三個(gè)框架除了都是前端框架之外，還大有搞基的成分存在。注意他們?nèi)齻€(gè)的名字，分別以v，a，r 開頭，我這么一說，你是不是忽然間就想到了什么。哈哈，正是如此，將他們組合起來不就是java中無處不在的鬼東西么？var (當(dāng)然純屬于開玩笑的)??var關(guān)鍵字，是js的變量聲明關(guān)鍵字，可以說，它是js得以運(yùn)行的核心關(guān)鍵字，因?yàn)橐胍欢未a運(yùn)行，首先得有各種變量和邏輯判斷做支撐，而在es6之前，js能聲明變量的，就它一個(gè)。這似乎也是暗示了vue，angularjs，react這三個(gè)框架的不可替代性啊，也不知道當(dāng)時(shí)這三個(gè)框架的作者起名時(shí)的想表達(dá)的特殊含義是什么，但偏偏就剛好對(duì)上了。當(dāng)然，反過來說，也有可能是起var關(guān)鍵字的這個(gè)人，當(dāng)時(shí)考慮得面面俱到。雖然看上去是巧合，但我總感覺這之中總有一種道不明的關(guān)系。雖然vue是后起之秀，但就目前的受歡迎程度來說，好像就是這個(gè)順序，至少國內(nèi)現(xiàn)在肯定是這樣的。??有了這三個(gè)框架之后，我們告別了以前jquery面條式的代碼，也擺脫了到處操作dom元素帶來的繁瑣，模塊業(yè)務(wù)劃分更清晰。這三個(gè)框架的出現(xiàn)，不僅讓前端的工作得以高效，也讓后端省了不少事，比如，路由控制。在以前，干后端是對(duì)決要比前端高一個(gè)檔次的，但現(xiàn)在，完全不一樣了。如果有一個(gè)牛逼的前端，后端差不多只需要會(huì)增刪改查的基本業(yè)務(wù)就能完全搞定一個(gè)web應(yīng)用。當(dāng)然，這里只是針對(duì)代碼部分，搭建服務(wù)器之類的另當(dāng)別論。

二、三大框架的優(yōu)缺點(diǎn)

??我們主要從數(shù)據(jù)流、視圖渲染、性能與優(yōu)化、模塊化組件化等四個(gè)方面來作比較 1、數(shù)據(jù)流

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

1.1、它的實(shí)現(xiàn)原理：

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

1.2、雙向綁定的三個(gè)重要方法：

apply()digest()watch()??在angularjs雙向綁定中，有2個(gè)很重要的概念叫做dirty check，digest loop，dirty check（臟檢測）是用來檢查綁定的scope中的對(duì)象的狀態(tài)的，例如，在js里創(chuàng)建了一個(gè)對(duì)象，并且把這個(gè)對(duì)象綁定在scope下，這樣這個(gè)對(duì)象就處于digest loop中，loop通過遍歷這些對(duì)象來發(fā)現(xiàn)他們是否改變，如果改變就會(huì)調(diào)用相應(yīng)的處理方法來實(shí)現(xiàn)雙向綁定??Vue 也支持雙向綁定，默認(rèn)為單向綁定，數(shù)據(jù)從父組件單向傳給子組件。在大型應(yīng)用中使用單向綁定讓數(shù)據(jù)流易于理解。

1.3、臟檢測的利弊

??和ember.js等技術(shù)的getter/setter觀測機(jī)制相比（優(yōu)）：??getter/setter當(dāng)每次對(duì)DOM產(chǎn)生變更，它都要修改DOM樹的結(jié)構(gòu)，性能影響大，Angular會(huì)把批量操作延時(shí)到一次更新，性能相對(duì)較好。??和Vue相比（劣）：??Vue.js 有更好的性能，并且非常非常容易優(yōu)化，因?yàn)樗皇褂门K檢查。Angular，當(dāng) watcher 越來越多時(shí)會(huì)變得越來越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。 Angular 用戶常常要使用深?yuàn)W的技術(shù)，以解決臟檢查循環(huán)的問題。有時(shí)沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。Vue.js 則根本沒有這個(gè)問題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步列隊(duì)更新，所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)，除非它們之間有明確的依賴關(guān)系。唯一需要做的優(yōu)化是在 v-for 上使用 track-by。??React-單向數(shù)據(jù)流??MVVM流的Angular和Vue，都是通過類似模板的語法，描述界面狀態(tài)與數(shù)據(jù)的綁定關(guān)系，然后通過內(nèi)部轉(zhuǎn)換，把這個(gè)結(jié)構(gòu)建立起來，當(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來管理狀態(tài)數(shù)據(jù)。

2、視圖渲染 Angular1

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

React

??React 的渲染建立在 Virtual DOM 上——一種在內(nèi)存中描述 DOM 樹狀態(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ù)的同步。它也開辟了 Java 同構(gòu)應(yīng)用的可能性。??在超大量數(shù)據(jù)的首屏渲染速度上，React 有一定優(yōu)勢(shì)，因?yàn)?strong>Vue 的渲染機(jī)制啟動(dòng)時(shí)候要做的工作比較多，而且React 支持服務(wù)端渲染。React 的Virtual DOM 也需要優(yōu)化。復(fù)雜的應(yīng)用里可以選擇 1. 手動(dòng)添加shouldComponentUpdate 來避免不需要的 vdom re-render；2. Components 盡可能都用 pureRenderMixin，然后采用 Flux 結(jié)構(gòu) + Immutable.js。其實(shí)也不是那么簡單的。相比之下，Vue由于采用依賴追蹤，默認(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)化。

3、性能與優(yōu)化

??性能方面，這幾個(gè)主流框架都應(yīng)該可以輕松應(yīng)付大部分常見場景的性能需求，區(qū)別在于可優(yōu)化性和優(yōu)化對(duì)于開發(fā)體驗(yàn)的影響。Vue 的話需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable，Angular 2 需要手動(dòng)指定 change detection strategy。從整體趨勢(shì)上來說，瀏覽器和手機(jī)還會(huì)越變?cè)娇欤蚣鼙旧淼匿秩拘阅茉谡麄€(gè)前端性能優(yōu)化體系中，會(huì)漸漸淡化，更多的優(yōu)化點(diǎn)還是在構(gòu)建方式、緩存、圖片加載、網(wǎng)絡(luò)鏈路、HTTP/2 等方面

4、模塊化與組件 Angular1 -> Angular2

??Angular1使用依賴注入來解決模塊之間的依賴問題，模塊幾乎都依賴于注入容器以及其他相關(guān)功能。不是異步加載的，根據(jù)依賴列出第一次加載所需的所有依賴。??可以配合類似于Require.js來實(shí)現(xiàn)異步加載，懶加載（按需加載）則是借助于 ocLazyLoad 方式的解決方案，但是理想情況下應(yīng)該是本地框架會(huì)更易懂。??Angular2使用ES6的module來定義模塊，也考慮了動(dòng)態(tài)加載的需求。

Vue

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

React

一個(gè) React 應(yīng)用就是構(gòu)建在 React 組件之上的。??組件有兩個(gè)核心概念：props,state。 一個(gè)組件就是通過這兩個(gè)屬性的值在 render 方法里面生成這個(gè)組件對(duì)應(yīng)的 HTML 結(jié)構(gòu)。??傳統(tǒng)的 MVC 是將模板放在其他地方，比如 標(biāo)簽或者模板文件，再在 JS 中通過某種手段引用模板。按這種思路，想想多少次我們面對(duì)四處分散的模板片段不知所措？糾結(jié)模板引擎，糾結(jié)模板存放位置，糾結(jié)如何引用模板。??React 認(rèn)為組件才是王道，而組件是和模板緊密關(guān)聯(lián)的，組件模板和組件邏輯分離讓問題復(fù)雜化了。所以就有了 JSX 這種語法，就是為了把 HTML 模板直接嵌入到 JS 代碼里面，這樣就做到了模板和組件關(guān)聯(lián)，但是 JS 不支持這種包含 HTML 的語法，所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用（可以進(jìn)行跨平臺(tái)開發(fā)的依據(jù)，通過不同的解釋器解釋成不同平臺(tái)上運(yùn)行的代碼，由此可以有RN和React開發(fā)桌面客戶端）。

三、我們?nèi)绾芜x？

??年輕的程序員都是好奇的貓，玩過一個(gè)又一個(gè)的前端框架。從毛球上弄出一條條的線，玩啊玩，最后這一個(gè)個(gè)的框架在腦子里攪漿糊。有太多的選擇，就是一件麻煩的事；沒有選擇時(shí)，就是一件更麻煩的事；有唯一的選擇時(shí)，事情就會(huì)變得超級(jí)簡單。??當(dāng)一個(gè)程序員學(xué)了某個(gè)最新的框架之后，通常來說這個(gè)框架有著更多的優(yōu)點(diǎn)，這個(gè)時(shí)候最容易出現(xiàn)的想法就是替換現(xiàn)有的框架，科室現(xiàn)有的框架并沒有什么大的問題，并且評(píng)估不充分的時(shí)候，新的框架則會(huì)有更多的風(fēng)險(xiǎn)。??所以最后總結(jié)一下：技術(shù)選型沒有銀彈，沒有一個(gè)框架能夠解決所有的問題。這時(shí)，為了更好的考量不同的因素，你需要列出重要的象限，如開發(fā)效率，團(tuán)隊(duì)喜好，開發(fā)周期等時(shí)機(jī)情況選擇哪個(gè)框架最合適你當(dāng)前的團(tuán)隊(duì)和項(xiàng)目。