vue、react、angular三大框架對比 && 與jQuery的對比-已整理

vue與react

　　vue和react是當前最火的兩個前端框架，vue的發展很快，可是目前來講，react的生態系統會更強大，世界上使用這個框架的人也不少。 另外，react是facebook官方維護的， 而vue是尤雨溪本人維護的。 而且在其餘周邊庫，如react的react-rouer和redux，是react社區在維護的。 而vue的vuex和vue-router都是尤雨溪在維護的。 

一、都在使用 Virtual DOM， 固然，不得不說，vue的虛擬DOM必定是從react這裏模仿的，可是好的東西就是須要被模仿的，而沒有必要重複的造輪子，因此沒毛病。使用虛擬DOM的好處就不少了，好比經過虛擬DOM結合diff算法，咱們能夠很好地解決DOM操做的性能問題，即 生成虛擬DOM的時間 + diff算法時間 + patch時間 < 修改DOM省下來的時間，固然，若是某一天DOM操做很快，那麼就不存在這個問題了。react可能就會被其餘框架取代了。 另外， 使用虛擬DOM，可使得JavaScript的應用不只僅侷限於網頁，還能夠是ios、安卓等，由於在react中沒有用到html，用到的時jsx，虛擬dom，最後生成的能夠是用在網頁上的html，也能夠是用在安卓和ios的控件，因此，react-native的大火也就可想而知了。 、

二、都提供了響應式（Reactive）和組件化（Composable）的視圖組件。

　　　react和vue中的組件都是核心， 是整個框架的靈魂，以前咱們使用的都是以頁面爲基本單位的，可是殊不知道組件的好處。 

　　    首先經過組件化之後，這個組件就是可複用的了，好比若是使用傳統方式寫一個網站，若是標題和結尾都是同樣的，那咱們可能會不斷的複製、粘貼，可是呢，若是使用了組件化的思想，只須要寫好組件，而後在須要的地方插入組件便可。 

　　    又好比vue中的單文件組件，咱們寫一個組件，就知道是什麼含義，而且css和js均可以寫在一個文件裏， css經過屬性 scoped 能夠防止css的類名污染。 而對於template也能夠放心的使用，不用擔憂重複的問題。

　　　基於react的UI庫ant.design，咱們還能夠直接調用這些組件，大大地加快了前端開發的速度和效率，因此，組件的使用，絕對是前端的一小步，歷史的一大步。 

三、都將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。

　　   即vue和react都是專一於視圖的框架，只是在局部區域，vue提供了雙向數據綁定，這樣更有利於咱們處理表單等問題，而react在這方面就有了必定的劣勢。。

　　　而若是但願作大型的項目，對於vue來講，就可使用vue-router，來構建大型網站的路由； 狀態複雜，很差管了，咱們就使用vuex； 因此，這也就是官網所說的漸進式的框架 了 。一樣的，react也是能夠直接使用的，包括react-router和redux，方便咱們構建大型應用。   只是前者的周邊庫是由尤雨溪維護，後者是由react龐大的社區維護的。

四、vue比react更容易上手。

　　   這一點是毋庸置疑的，爲何這麼說呢？ 由於對於vue，不管你是使用webpack仍是broserify， vue-cli均可以很好地知足你的開發任務。

　　　學習vue，咱們只須要掌握中級的html、css、js便可，在head中引入一個vue.js庫，就能夠直接使用了。而且對於數據雙向綁定、指定等均可以很好地體現。

　　　可是react的學習會更加複雜一些，react須要有ES6的基礎，由於react組件的建立可能是使用es6的class來建立的，因此會更加麻煩一些，而且對於JSX語法，仍是有必定的學習成本的。 

　　　所以咱們說vue更容易上手。 

五、 性能都很好。

　　  vue和react都採用了虛擬DOM的方式，因此在性能方面是很是地接近的，這個無需多說，  

六、vue的優化作的要比react好一些。

　　在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹。如要避免沒必要要的子組件的重渲染，你須要在全部可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會須要使用不可變的數據結構來使得你的組件更容易被優化。 然而，使用 PureComponent 和 shouldComponentUpdate 時，須要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。若是不符合這個狀況，那麼此類優化就會致使難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨着至關的心智負擔。

　　而在作vue相關的項目時，咱們只須要關注於業務邏輯，而不須要去操心是否會產生沒必要要的組件渲染，由於vue已經把這些麻煩的東西很好的解決了。 

七、vue和react一樣都支持本地渲染。

　　React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP（iOS 和 Android）。能同時跨多平臺開發，對開發者是很是棒的。相應地，Vue 和 Weex 會進行官方合做，Weex 是阿里的跨平臺用戶界面開發框架，Weex 的 JavaScript 框架運行時用的就是 Vue。這意味着在 Weex 的幫助下，你使用 Vue 語法開發的組件不只僅能夠運行在瀏覽器端，還能被用於開發 iOS 和 Android 上的原生應用。

　　一句話： 你寫的組件不只能夠跑在瀏覽器的網頁上，也能夠泡在安卓和ios的app裏。  

八、 react更爲繁榮。

　　react社區仍是很是繁榮的，因此在知名度方面react也是更勝一籌，使用react和react-native的開發人員仍是不少的，這也是vue須要學習和進步的地方。 

九、 vue寫起來更加流暢、方便， react語法更簡單、擴展更強大。 

　　  在這一方面，react和vue的出發點彷佛是不同的，可是我仍是比較喜歡vue的寫法。 好比，對於列表循環，使用vue，直接在標籤上寫 v-for 便可，而後就能夠直接循環了，而react須要經過一個數組的map，而後在return，在形式上來講，vue的寫法仍是更加舒服一點。 另外，因爲vue局部的數據雙向綁定，因此vue在處理表單這一塊也是遊刃有餘，很是方便，而react僅僅是處理一個表單，就須要添加不少無關的代碼，這個仍是很是彆扭的。 

　      能夠看得出來，vue提供了更多的api，能夠作更多的事情，可是， 這也體現了react的優勢，即很是簡單，提供的api不多，它只幫咱們作了虛擬DOM的工做，其餘的事情可讓咱們自由的發揮，因此從這個角度來講，react仍是更加簡單一些的。    

十、 vue的文檔更加好。

　　雖然react也有中文文檔，可是vue的文檔更新的更頻繁，而且寫的很好，咱們能夠很容易地學習。 畢竟大佬是中國的，仍是很不錯的，推薦初學者學習、使用。

 十一、 不管是vue仍是react咱們都不須要觸碰DOM。 

　　就這二者而言，咱們都關心虛擬DOM，而不用去觸碰DOM，這些都是vue幫助咱們處理好的了。由於dom的操做是費時的，因此經過vue，咱們能夠很好地解決這些問題，儘量少的減小DOM。 通常來講，對於一個項目，咱們使用了vue或者是react，jquery基本上就是不須要的了。若是真的須要，看看到底哪裏作的不對。

十二、vue對於事件的清除優於react。 

　　在vue中，事件綁定以後，能夠在組件銷燬的同時事件接觸綁定，無需咱們本身去手動清除； 而react卻不是這樣的，react須要咱們在 componentDidMount 的時候綁定，在 componentWillUnMount 的時候接觸綁定，不然會出現問題，尤爲是添加在 document 上面的事件 。  

vue與angular

　　二者都是數據雙向綁定的框架，我也只是看了看angular的api，沒有真正的用過，因此對於angular只能有一個簡單的比較   

一、 angular和vue都使用了指令。

　　指令是一個比較方便的操做， 而vue做者的指令的靈感也都是從angular而來的，因此vue整體來講仍是react和angular的結合體，他把二者的優勢作告終合，把缺點去除，因此，vue是個好東西，惋惜不徹底是原創，可是也足夠讓咱們敬佩了。

二、 vue比angular的設計更簡單。

　　在api上，雖然vue比react複雜一些，可是angular更加複雜。 

三、 vue更容易上手。

　　在vue和react的比較中，咱們就知道vue對於小白來講很容易就能夠上手了， 而angular還要學習typescript等等，上手難度較大。 

四、angular的雙向數據綁定不容易控制。

　　在vue中，局部使用數據雙向綁定，可是全局而言使用的數據單向綁定。 而angular使用的確實數據雙向綁定，因此vue更容易管理狀態。

五、 性能上來講vue更好一些。 

　　由於vue不須要使用angular的髒檢查，一些vue都已經給你作好了。 在 AngularJS 中，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。AngularJS 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。Vue 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步隊列更新，全部的數據變化都是獨立觸發，除非它們之間有明確的依賴關係。 

 react與angular

一、 二者的社區基礎都很好。 

　　react是facebook的，angular是谷歌的，因此，咱們不用擔憂其社區基礎。

二、 angular是一個真正的框架，react是一個庫。

　　react不是框架。 angular自身就繼承了各類插件，因此，咱們不須要再過多的考慮，它已經提供給你了各類解決辦法，而react是比較輕的，只是解決了其中的某個痛點而已。

三、就性能而言，react更好。

　　react提出了虛擬DOM這個關鍵，很好地提高了性能，這一點要比angular強大。

 三大框架與jQuery的對比

　　儘管三大框架目前都是很是流行的，可是不得不說，jQuery的使用仍是大多數（90%），可是選擇三大框架仍是選擇jQuery？ 

• 若是你要作單頁面應用，那麼你就選擇三大框架； 若是你要作多頁應用，你就選擇jQuery。 
• 若是你的數據都是在在服務器端進行修改的，那麼毫無疑問，使用三大框架你也無法管理數據，因此使用jQuery； 可是，若是你的數據都是在客戶端的，即前端須要處理大量的數據，那麼這時就須要選用三大框架了，好比vue的store倉庫、好比react的store，他們對於數據的存儲都有很好的管理能力。  單項數據流更使得應用便於管理，如react的store -> view -> action -> store -> view -> action。。。 如此循環往復的單項數據流。
• 若是你要頻繁的手動操做DOM，那麼選擇jQuery，畢竟jQuery封裝了大量的兼容性的DOM操做api； 而若是你的項目是數據驅動的，那麼選擇vue、react，由於你只要給定數據，就可使得頁面獲得渲染了， 而不須要操做dom，或者說，有了react，dom操做就不存在了。