vue和react的區(qū)別及優(yōu)缺點

共同點

• 數(shù)據(jù)驅(qū)動視圖
• 組件化
• 都使用 Virtual DOM

1.數(shù)據(jù)驅(qū)動視圖

在jquery時代，我們需要頻繁的操作DOM來實現(xiàn)頁面效果與交互；而Vue和React解決了這一痛點，采用數(shù)據(jù)驅(qū)動視圖方式，隱藏操作DOM的頻繁操作。

所以我們在開發(fā)時，只需要關(guān)注數(shù)據(jù)變化即可，但是二者實現(xiàn)方式不盡相同。

2.組件化

React與Vue都遵循組件化思想，它們把注意力放在UI層，將頁面分成一些細塊，這些塊就是組件，組件之間的組合嵌套就形成最后的網(wǎng)頁界面。

所以在開發(fā)時都有相同的套路，比如都有父子組件傳遞，都有數(shù)據(jù)狀態(tài)管理、前端路由、插槽等。

3.Virtual DOM

Vue與React都使用了 Virtual DOM + Diff算法，不管是Vue的Template模板+options api寫法，還是React的Class或者Function寫法，最后都是生成render函數(shù)，而render函數(shù)執(zhí)行返回VNode(虛擬DOM的數(shù)據(jù)結(jié)構(gòu)，本質(zhì)上是顆樹)。

當每一次UI更新時，總會根據(jù)render重新生成最新的VNode，然后跟以前緩存起來老的VNode進行對比，再使用Diff算法（框架核心）去真正更新真實DOM（虛擬DOM是js對象結(jié)構(gòu)，同樣在js引擎中，而真實DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實DOM開銷要小得多）。

不同點

Vue和React兩者雖然都是用于構(gòu)建用戶界面的框架，但是也有很大的差異，首先二者核心的思想就不同。

1.核心思想不同

Vue開發(fā)的定位就是盡可能的降低前端開發(fā)的門檻，讓更多的人能夠更快地上手開發(fā)。這就有了vue地主要特點：靈活易用地漸進式框架，進行數(shù)據(jù)攔截/代理，它對偵測數(shù)據(jù)地變化更加敏感、更精準。

React從一開始地定位就是提出UI開發(fā)的新思路。背靠大公司Facebook的React，從開始起就不缺關(guān)注和用戶，而且React想要做的是用更好的方式去顛覆前端開發(fā)方式。所以React推崇函數(shù)式編程（純組件），數(shù)據(jù)不可變以及單向數(shù)據(jù)流，當然需要雙向的地方也可以手動實現(xiàn)，比如借助onChange和setState來實現(xiàn)。

由于兩者核心思想的不同，所以導致Vue和React在后續(xù)設(shè)計產(chǎn)生了許多差異。

2.組件寫法差異

React推薦的做法是JSX + inline style，也就是把 HTML 和 CSS 全部寫進 javascript中，即all in js；Vue推薦的做法是 template 的單文件組件格式（簡單易懂，從傳統(tǒng)前端轉(zhuǎn)過來易于理解），即 html，css，js寫在同一個文件（vue也支持JSX寫法）。這個差異一定程度上也是由于二者核心思想不同而導致的。

3.diff算法不同

傳統(tǒng)diff算法是循環(huán)遞歸每一個節(jié)點。將兩棵樹中所有的節(jié)點一一對比需要O(n²)的復雜度，在對比過程中發(fā)現(xiàn)舊節(jié)點在新的樹中未找到，那么就需要把舊節(jié)點刪除，刪除一棵樹的一個節(jié)點（找到一個合適的節(jié)點放到被刪除的位置）的時間復雜度為O(n)，同理添加新節(jié)點的復雜度也是O(n)，合起來diff兩棵樹的復雜度就是O(n³)。傳統(tǒng)Diff算法復雜度太高，vue2.x加入了 Virtual Dom 和react擁有相同的diff優(yōu)化原則（將算法復雜度降為O(n)）。

兩者流程思路上是類似的：

不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。當style不相同時，對應(yīng)DOM操作就是直接銷毀老的DOM，創(chuàng)建新的DOM。同一層次的一組子節(jié)點，可以通過唯一的key區(qū)分。

React的Diff算法核心實現(xiàn)

react首先對新集合進行遍歷，for(name in nextChildren)，通過唯一的key來判斷老集合中是否存在相同的節(jié)點。如果沒有的話就創(chuàng)建，如果有的話，if(preChild === nextChild)會將節(jié)點在新集合中的位置和老集合中l(wèi)astIndex進行比較，如果 if(child._mountIndex < lastIndex)進行移動操作，否則不進行移動操作。如果遍歷的過程中，發(fā)現(xiàn)在新集合中沒有，但在老集合中有的節(jié)點，會進行刪除操作。

vue的Diff算法核心實現(xiàn)

updateChildren是vue diff的核心，過程可以概括為：

舊children和新children各有兩個頭尾的變量StartIdx和EndIdx，它們的兩個變量相互比較，一共有四種比較方式。如果四種方式都沒匹配，如果設(shè)置了key，就會用key進行比較，在比較的過程中，變量會往中間靠，一旦StartIdx > EndIdx表明舊children和新children至少有一個已經(jīng)遍歷完了，就會結(jié)束比較。

Vue2的核心Diff算法采用了雙端比較的算法，同時從新舊children的兩端開始進行比較 ，借助key值找到可復用的節(jié)點，再進行相關(guān)操作。相比React的Diff算法，同樣情況下可以減少移動節(jié)點次數(shù)，減少不必要的性能損耗，更加的優(yōu)雅。

4.響應(yīng)式原理不同

Vue：

• Vue依賴收集，自動優(yōu)化，數(shù)據(jù)可變。
• Vue遞歸監(jiān)聽data的所有屬性，直接修改。
• 當數(shù)據(jù)改變時，自動找到引用組件重新渲染。

React：

• React基于狀態(tài)機，手動優(yōu)化，數(shù)據(jù)不可變，需要setState驅(qū)動新的state替換老的state。當數(shù)據(jù)改變時，以組件為根目錄，默認全部重新渲染，所以React中會需要 shouldComponentUpdate這個生命周期函數(shù)方法來進行控制

5.其他不同點

除了上面的四個不同點外，細數(shù)還有很多不同點的。比如api的差異也挺大的，Vue為了更加簡單易用，引入了指令、filter等概念以及大量的option API，比如 watch、computed等都是非常好用的。

而React得API比較少，如果你的javascript基礎(chǔ)比較好，上手也是非常容易的。

react和vue哪個比較受歡迎，以后主流應(yīng)該是哪個方向？

react是在全球或者說是國際上影響力巨大，尤其是19年推出reacthooks方式具有里程碑意義。

而vue呢具體應(yīng)該是發(fā)展迅速，尤其是是在國內(nèi)占有巨大的用戶群體，框架是學不完的，所以說還是打好原生的基礎(chǔ)。推薦可以看看掘金。

Vue和React那個更好？

兩個框架各有優(yōu)點，整體來說React更成熟。

• 1.VUE主要用模板搭建應(yīng)用，React要求開發(fā)者借助JSX創(chuàng)建DOM。
• 2.VUE簡單上手，中小型項目更適合，大型應(yīng)用選React。
• 3.ReactNative更適合原生APP的框架，如果是多端開發(fā)，應(yīng)選擇React。

為什么react還比vue火

優(yōu)勢:react前景更好。

并不是說Vue的缺陷，而是想說:使用Vue上手太容易，導致一開始搞前端的人一下子就能看著中文文檔搞出SPA，容易產(chǎn)生自信，忽略對周邊類庫的關(guān)注，缺乏對Vue進行貢獻的能力。

雖然用戶群體多，但有能力進行改造開發(fā)或集成其他模塊的人并不多，大多屬于使用群體，其生態(tài)更多的只能依賴尤大，可以想見Vue生態(tài)的發(fā)展速度不會很快，下次出現(xiàn)更有用的亮點也很可能不會在Vue。

Reduxmobx類數(shù)據(jù)流管理也先在react上出現(xiàn)，有無數(shù)真正樂于開發(fā)研究貢獻的人在react社區(qū)，改進react，增強。react社區(qū)才是真正意義上的火。

性能方面我不好定奪，各有優(yōu)劣開發(fā)難度Vue確實簡單些維護性差不多react也不是上手成本高，只是想要自己從頭構(gòu)建工程成本高，但并不是一定要自己做，react社區(qū)一堆一鍵安裝的工程，只不過不會出現(xiàn)在官網(wǎng)或文檔中，造成大部分國人不知道怎么上手。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論