三種Web前端框架比較與介紹--Vue, react, angular

 

1、Angular

一、MVVM（Model）(View)(View-model)；

二、模塊化（Module）控制器（Contoller）依賴注入；

三、雙向數據綁定：界面的操做能實時反映到數據，數據的變動能實時展示到界面；

四、指令(ng-click ng-model ng-href ng-src ng-if...)；

五、服務Service($compile $filter $interval $timeout $http...)。

備註：

(1) api比較全，功能比較完善。關於數據綁定，使用雙向綁定，可是vue不一樣組件間強制使用單向數據流。
同時關於性能方面：angular觀察數據是使用髒檢查，而vue是使用基於依賴追蹤的觀察系統而且異步更新，左右的數據變化都是獨立觸發。

(2) 學習曲線很是陡峭，api面積相對於vue大不少，但angular適合構建複雜的大型應用。

2、React

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。

這個項目自己也越滾越大，從最先的UI引擎變成了一整套先後端通吃的 Web App 解決方案。衍生的 React Native 項目，目標更是宏偉，但願用寫 Web App 的方式去寫 Native App。若是可以實現，整個互聯網行業都會被顛覆，由於同一組人只須要寫一次 UI ，就能同時運行在服務器、瀏覽器和手機。

React主要用於構建UI。你能夠在React裏傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也能夠是靜態的HTML DOM元素、也能夠傳遞動態變量、甚至是可交互的應用組件。

 

3、Vue

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。；

Vue.js是一個構建數據驅動的Web界面的庫。

Vue.js是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的複雜單頁應用。數據驅動+組件化的前端開發。

 

特色：

一、模塊化，目前最熱的方式是在項目中直接使用ES6的模塊化，結合Webpack進行項目打包；

二、組件化，創造單個component後綴爲.vue的文件，包含template(html代碼)，script(es6代碼),style(css樣式)；

三、路由。

 

 

4、比較

1 angular和vue的差異

　　Angular是mvvm框架, 而vue是一個漸進式的框架, 至關於view層, 都有雙向數據綁定,  可是angular中的雙向數據綁定是基於髒檢查機制, vue的雙向數據綁定是基於ES5的getter和setter來實現, 而angular是有本身實現一套模板編譯規則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學習成本低, vue須要一個el對象進行實例化, 而angular是整個html頁面下的,單頁面應用, 而vue能夠有過個vue實例；

注：angular能夠進行自動化的測試，就是通常作移動端應用時，ui-router路由方面難以處理，常常出錯，這塊是一個大坑。

2  Vue & React

總體上看Vue與react比較，相同之處在於：
- 都使用了virtual DOM
- 提供了響應式和組件化的視圖組件
- 將注意力集中在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫

 

在性能方面，React中，某個組件發生變化，它會以該組件爲根，從新渲染整個組件子樹。而在Vue組件的依賴是在渲染過程當中自動追蹤的，全部能知道哪一個組件確實須要被渲染。

在模板方面，vue中html,css,js是分開的，而react中全部組件渲染都依靠JSX,HTML，css,js都是利用jsx.

在規模方面的話，vue和react都提供了強大的路由來應對大型應用。在狀態管理方面，分別使用vuex和Redux來進行全局狀態管理。vue的生態系統庫沒有react繁榮。

同時react學習曲線陡峭，vue相對而言比較好上手。

 

具體來說：

類似之處

• 他們都是JavaScript的UI框架，專一於創造前端的富應用
• 不一樣於早期的JavaScript框架「功能齊全」，Reat與Vue只有框架的骨架，其餘的功能如路由、狀態管理等是框架分離的組件。
• Vue.js(2.0版本)與React的其中最大一個類似之處，就是他們都使用了一種叫’Virtual DOM’的東西
• 都鼓勵組件化
• 看到React和Vue都有’props’的概念，這是properties的簡寫。props在組件中是一個特殊的屬性，容許父組件往子組件傳送數據。
• React和Vue都有本身的構建工具，你可使用它快速搭建開發環境
• React和Vue都有很好的Chrome擴展工具去幫助你找出bug。
• Vue與React最後一個類似但略有不一樣之處是它們配套框架的處理方法。相同之處在於，兩個框架都專一於UI層，其餘的功能如路由、狀態管理等都交由同伴框架進行處理。

react

• 數據流單向
• React推廣了Virtual DOM，並創造了新的語法——JSX，JSX容許開發者在JavaScript中書寫HTML
• React同樣由如Facebook這類大公司維護
• props對於子組件來講是必須的，由於它依賴一個「單一數據源」做爲它的「狀態」
• React可使用Create React App (CRA)
• 而React的react-router和react-redux則是由社區成員維護，它們都不是官方維護的。
• React與Vue最大的不一樣是模板的編寫
• 在React中你須要使用setState()方法去更新狀態
• 多數狀況下，框架內置的狀態管理是不足以支撐大型應用的，Redux或Vuex等狀態管理方案是必須使用的。

vue

• 數據雙向綁定
• Vue使用模板系統而不是JSX，使其對現有應用的升級更加容易,這是由於模板用的就是普通的HTML，經過Vue來整合現有的系統是比較容易的，不須要總體重構
• Vue主要是由一位開發者進行維護的
• 而在Vue中，props略有不一樣。它們同樣是在組件中被定義，但Vue依賴於模板語法，你能夠經過模板的循環函數更高效地展現傳入的數據。
• Vue對應的則是vue-cli
• Vue的核心團隊維護着vue-router和vuex
• React與Vue最大的不一樣是模板的編寫
• 在Vue中，state對象並非必須的，數據由data屬性在Vue對象中進行管理。
• Vue的）解決方案適用於小型應用，但對於對於大型應用而言不太適合。

 

具體可參考文章 Vue.js與React的全面對比

 

 

 

參考文章

AngularJS與Vue的比較

Vue,react,angular三種框架比較

vue和react 類似和區別