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

共同點(diǎn)

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

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

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

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

2.組件化

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

所以在開發(fā)時(shí)都有相同的套路，比如都有父子組件傳遞，都有數(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ì)上是顆樹)。

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

不同點(diǎn)

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

1.核心思想不同

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

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

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

2.組件寫法差異

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

3.diff算法不同

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

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

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

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

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

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

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

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

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

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

Vue：

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

React：

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

5.其他不同點(diǎn)

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

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

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

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

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

Vue和React那個(gè)更好？

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

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

為什么react還比vue火

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

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

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

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

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

總結(jié)

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

最新評(píng)論