瞭解前端框架之前先了解一下他們框架的模式，前端框架模式可以歸結為三類分別為MVC，MVP，MVVM

1.MVC：Model(模型)+View(檢視)+controller(控制器)，主要是基於分層的目的，讓彼此的職責分開。View通過Controller來和Model聯絡Controller是View和Model的協調者，View和Model不直接聯絡，基本聯絡都是單向的。使用者User通過控制器Controller來操作模板Model從而達到檢視View的變化。

2.MVP：是從MVC模式演變而來的，都是通過Controller/Presenter負責邏輯的處理+Model提供資料+View負責顯示。在MVP中，Presenter完全把View和Model進行了分離，主要的程式邏輯在Presenter裡實現。並且，Presenter和View是沒有直接關聯的，是通過定義好的介面進行互動，從而使得在變更View的時候可以保持Presenter不變。MVP模式的框架：Riot.js。

3.MVVM：MVVM是把MVC裡的Controller和MVP裡的Presenter改成了ViewModel。Model+View+ViewModel。View的變化會自動更新到ViewModel,ViewModel的變化也會自動同步到View上顯示。這種自動同步是因為ViewModel中的屬性實現了Observer，當屬性變更時都能觸發對應的操作。MVVM模式的框架有：Vue.js+Angular.js。

vue.js

API設計上簡單，語法簡單，學習成本低

構建方面不包含路由和ajax功能，使用vuex, vue-router

指令（dom）和元件（檢視，資料，邏輯）處理清晰

效能好，容易優化

基於依賴追蹤的觀察系統，並且非同步佇列更新

獨立觸發

v-model 實時渲染

適用於：模板和渲染函式的彈性選擇

簡單的語法及專案搭建

更快的渲染速度和更小的體積

react.js

利用jsx建立虛擬dom

是一種在記憶體中描述dom數狀態的資料結構

函式式的方法描述檢視

使用虛擬dom作為模板

程式片段

不好控制dom

生命週期

服務端渲染：react的虛擬dom的生成可以在任何支援js的環境生成的，所以可以在node環境生成，直接轉為string,然後插入到html檔案中輸出瀏覽器便可

適用於：大型應用和更好的可測試性；同時適用於web端和原生app;更大的生態圈

優點

React偉大之處就在於，提出了Virtual Dom這種新穎的思路，並且這種思路衍生出了React Native，有可能會統一Web/Native開發。在效能方面，由於運用了Virtual Dom技術，Reactjs只在呼叫setState的時候會更新dom，而且還是先更新Virtual Dom，然後和實際Dom比較，最後再更新實際Dom。這個過程比起Angularjs的bind方式來說，一是更新dom的次數少，二是更新dom的內容少，速度肯定快

ReactJS更關注UI的元件化，和資料的單向更新，提出了FLUX架構的新概念，現在React可以直接用Js ES6語法了，然後通過webpack編譯成瀏覽器相容的ES5，開發效率上有些優勢.

React Native生成的App不是執行在WebView上，而是系統原生的UI，React通過jsx生成系統原生的UI，iOS和Android的React UI元件還是比較相似的，大量程式碼可以複用

維護UI的狀態,Angular 裡面使用的是 $scope，在 React 裡面使用的是 this.setState。 而 React 的好處在於，它更簡單直觀。所有的狀態改變都只有唯一一個入口 this.setState()，Angular 就比較複雜。

同構的JavaScript

單頁面JS應用程式的最大缺陷在於對搜尋引擎的索引有很大限制。React對此有了解決方案。

React可以在伺服器上預渲染應用再發送到客戶端。它可以從預渲染的靜態內容中恢復一樣的記錄到動態應用程式中。

因為搜尋引擎的爬蟲程式依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜尋引擎優化。

缺點

React是目標是UI元件，通常可以和其它框架組合使用，目前並不適合單獨做一個完整的框架。React 即使配上 redux 的組合，也不能稱之一個完整的框架，比如你想用Promise化的AJAX？對不起沒有，自己找現成的庫去。而且第三方元件遠遠不如Angular多。目前在大的穩定的專案上採用React的，我也就只知道有Yahoo的Email。React本身只是一個V而已，所以如果是大型專案想要一套完整的框架的話，也許還需要引入Redux和route相關的東西。而Angular在這方面提供的東西比React多多了.

vue,react 共性：

虛擬dom實現快速渲染

輕量級響應式元件

服務端渲染易於整合路由工具，打包工具及狀態管理工具

angular.js

優點

AngularJS是一套完整的框架，angular有自帶的資料繫結、render渲染、angularUI庫,過濾器,directive(模板),服務q(defer),http，inject(依賴注入),factory,provider……，等等一系列工具，基本上只要你在做web開發用過的東西，它都有一個。但是這些東西React自身都沒有。

Angularjs的架構清晰，分工明確，擴充套件性良好，model，view，controller誰在什麼時候做什麼事情說的很清楚，angular能夠讓程式設計師真正專注於業務邏輯，而且因為對html侵入不大，非常易於和designer協作。整個框架充滿了DI的思路，耦合性非常低，物件都是被inject的，也就是說每個物件都可以輕易被替換而不影響其他物件。

Angular生產效率高，單向資料流什麼的想法非常好，但是寫起來太麻煩！我只想變更個很簡單的資料還要經過action、dispatcher、reduce、view四步，angular裡一行程式碼就搞定的事情在react裡卻如此麻煩

缺點

效能

雙向資料繫結是一把雙刃劍。隨著元件增加，專案越來越複雜，雙向資料繫結帶來效能問題。

雙向資料繫結是如何影響效能的？在JavaScript（ES5）中，並沒有實現當變數或物件改變時發出通知的功能，Angular的實現方法被叫做“Dirty-checking（髒檢查機制）”，通過跟蹤資料的改變再動態更新使用者介面（UI）。

在Angular的作用域中任何操作的執行都會引發Dirty-checking，隨著繫結數量的增加效能就會越低。

Angular 2.0推翻重做使得目前不宜採用此框架

Angular 1.x版本其實是個比較舊的東西了，現在看來有些理念過時了，比如依賴注入、自己獨特的模組化，這些東西其實在ES6下已經很好地被解決了。

Angular的2.0幾乎是一個推翻重做的框架，估計不會有1.X的upgrade方案。所以如果現在新開始的專案採用Angular的話，會是一個很尷尬的時機。同樣，如此大的改動似乎也反面印證了1.X並不是那麼好。

學習成本高

使用Angular需要學習大量的概念，包括但不限於：

模組 ，控制器 ，指令 ，作用域 ，模板 ，鏈式函式 ，過濾器 ，依賴注入