vue、react、angular的優缺點及三者的區別

學習前端三大主流框架，首先要了解MVC、MVP、MVVM三種框架模式

• MVC模式（Model(模型)+View(視圖)+controller(控制器)）

View經過Controller來和Model聯繫，Controller是View和Model的協調者，View和Model不直接聯繫，基本聯繫都是單向的。
用戶User經過控制器Controller來操做模板Model從而達到視圖View的變化

• MVP模式 （是從MVC模式演變而來的，都是經過Controller/Presenter負責邏輯的處理+Model提供數據+View負責顯示）

在MVP中，Presenter徹底把View和Model進行了分離，主要的程序邏輯在Presenter裏實現。
而且，Presenter和View是沒有直接關聯的，是經過定義好的接口進行交互，從而使得在變動View的時候能夠保持Presenter不變。

• MVVM模式 （Model+View+ViewModel）

MVVM是把MVC裏的Controller和MVP裏的Presenter改爲了ViewModel
View的變化會自動更新到ViewModel,ViewModel的變化也會自動同步到View上顯示。
這種自動同步是由於ViewModel中的屬性實現了Observer，當屬性變動時都能觸發對應的操做。

參考：https://www.cnblogs.com/Daisy...

vue框架（MVVM）

優勢：

• 輕量級框架，語法簡單，學習成本低
• 雙向數據綁定
• 組件化開發
• 數據和結構的分離
• 虛擬DOM
• 運行速度快
• 靈活漸進式框架

缺點：

• 不支持IE8
• 生態環境差，不如angular和react
• 不適合偏大型的項目

應用場景：小型應用

參考：https://blog.csdn.net/weixin_...

react框架（MVC）

優勢：

• jsx語法建立虛擬DOM，極速的渲染性能
• 組件化開發，組件獨立，方便重複使用
• 單向數據流
• 組件生命週期
• 跨瀏覽器兼容性好

缺點：

• 不適合單獨作一個完整的框架

React是目標是UI組件，一般能夠和其它框架組合使用，目前並不適合單獨作一個完整的框架。React 即便配上 Flux 的組合，也不能稱之一個完整的框架，好比你想用Promise化的AJAX？對不起沒有，本身找現成的庫去。並且第三方組件遠遠不如Angular多。

應用場景：個性化需求、中型應用

參考：https://www.cnblogs.com/qiqi7...

angular框架

優勢：

• 模板功能強大豐富，而且是聲明式的，自帶了豐富的Angular指令；
• 是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等全部功能；
• 自定義指令，自定義指令後能夠在項目中屢次使用。
• ng模塊化比較大膽的引入了Java的一些東西（依賴注入）
• 雙向綁定（髒檢查機制）

缺點：

• 驗證功能錯誤信息顯示比較薄弱，須要寫不少模板標籤
• ng提倡在控制器裏面不要有操做DOM的代碼，對於一些jQuery 插件的使用，若是想不破壞代碼的整潔性，須要寫一些directive去封裝插件
• 從1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美兼容低版本，升級以後可能會致使一個兼容性的BUG
• AngularJS 太笨重了，沒有讓用戶選擇一個輕量級的版本，固然1.2.X後，Angular也在作一些更改，好比把route，animate等模塊獨立出去，讓用戶本身去選擇。

應用場景：在大型超大型web應用開發上。

參考：論AngularJS的優缺點

vue與react的區別

相同點：

• react和vue都是用虛擬DOM Virtual DOM
• 中心思想相同：一切都是組件，組件實例之間能夠嵌套
• 都有着合理的鉤子函數
• 都不內置ajax、route等核心包，以插件的形式加載
• 都有配套的路由和負責處理全局狀態管理的庫；

不一樣點：

• React使用JSX渲染頁面，Vue使用簡單的模板
• Vue雙向數據流，React單向數據流
• Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做DOM。
• Vue比react運行更快

vue與angular的區別

相同點：

• 都支持指令：內置指令和自定義指令。
• 都支持過濾器：內置過濾器和自定義過濾器。
• 都支持雙向數據綁定。
• 都不支持低端瀏覽器。
• vue和angular綁定均可以用{{}}

不一樣點：

• vue至關於angular要變得小巧不少，運行速度比angular快
• vue指令用v-xxx，angular用ng-xxx
• vue中數據放在data對象裏面，angular數據綁定在$scope上面
• vue有組件化概念，angular中沒有
• AngularJS的學習成本高，好比增長了Dependency Injection特性，而Vue.js自己提供的API都比較簡單、直觀
• 在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢。 Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新。全部的數據都是獨立觸發的

react與angular的區別

相同點：

• 都是單向數據流

不一樣點：

• React中沒有指令，angular則提供了豐富的指令

參考：[1]: https://www.cnblogs.com/wxtli...
[2]：https://www.jianshu.com/p/ae1...