一、監(jiān)聽(tīng)數(shù)據(jù)變化的實(shí)現(xiàn)原理不同

• Vue通過(guò) getter/setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化 ，不需要特別的優(yōu)化就能達(dá)到很好的性能
• React默認(rèn)是通過(guò) 比較引用 的方式進(jìn)行的，如果不優(yōu)化( pureComponent/shouldComponentUpdate )可能導(dǎo)致大量不必要的VDOM得重新渲染

為什么 React 不精確監(jiān)聽(tīng)數(shù)據(jù)變化呢 ？這是因?yàn)?Vue 和 React 設(shè)計(jì)理念上的區(qū)別， Vue 使用的是可變數(shù)據(jù)，而React更強(qiáng)調(diào)數(shù)據(jù)的不可變。 所以應(yīng)該說(shuō)沒(méi)有好壞之分，Vue更加簡(jiǎn)單，而React構(gòu)建大型應(yīng)用的時(shí)候更加魯棒。

二、數(shù)據(jù)流的不同

• 大家都知道Vue中默認(rèn)是支持雙向綁定的。在Vue1.0中我們可以實(shí)現(xiàn)兩種雙向綁定：

props
v-model

• 在 Vue2.x 中去掉了第一種， 也就是父子組件之間不能雙向綁定了（但是提供了一個(gè)語(yǔ)法糖自動(dòng)幫你通過(guò)事件的方式修改），并且 Vue2.x 已經(jīng)不鼓勵(lì)組件對(duì)自己的 props 進(jìn)行任何修改了 。
  
• 然而 React從誕生之初就不支持雙向綁定，React一直提倡的是單向數(shù)據(jù)流，他稱之為 onChange/setState() 模式 。不過(guò)由于我們一般都會(huì)用 Vuex 以及 Redux 等單向數(shù)據(jù)流的狀態(tài)管理框架，因此很多時(shí)候我們感受不到這一點(diǎn)的區(qū)別了。

三、HOC和mixins

在Vue中我們組合不同功能的方式是通過(guò)mixin，而在React中我們通過(guò)HOC（高階組件）。React 最早也是使用 mixins 的，不過(guò)后來(lái)他們覺(jué)得這種方式對(duì)組件侵入太強(qiáng)會(huì)導(dǎo)致很多問(wèn)題，就棄用了 mixinx 轉(zhuǎn)而使用 HoC，關(guān)于mixin究竟哪里不好，可以參考React官方的這篇文章 Mixins Considered Harmful。而 Vue 一直是使用 mixin 來(lái)實(shí)現(xiàn)的。

但是為什么Vue不采用HOC的方式來(lái)實(shí)現(xiàn)呢？

因?yàn)?高階組件本質(zhì)就是高階函數(shù)，React的組件是一個(gè)純粹的函數(shù)，所以高階函數(shù)對(duì)React來(lái)說(shuō)非常簡(jiǎn)單 。但是Vue就不行了， Vue中組件是一個(gè)被包裝的函數(shù)，并不簡(jiǎn)單的就是我們定義組件的時(shí)候傳入的對(duì)象或者函數(shù) 。比如我們定義的模板怎么被編譯的？比如聲明的props怎么接收到的？這些都是vue創(chuàng)建組件實(shí)例的時(shí)候隱式干的事。由于vue默默幫我們做了這么多事，所以我們自己如果直接把組件的聲明包裝一下，返回一個(gè)高階組件，那么這個(gè)被包裝的組件就無(wú)法正常工作了。

四、組件通信的區(qū)別

在Vue 中有三種方式可以實(shí)現(xiàn)組件通信：

• 父組件通過(guò) props 向子組件傳遞數(shù)據(jù)或者回調(diào)，雖然可以傳遞回調(diào)，但是我們一般只傳數(shù)據(jù)，而通過(guò) 事件的機(jī)制來(lái)處理子組件向父組件的通信
• 子組件通過(guò) 事件 向父組件發(fā)送消息
• 通過(guò) V2.2.0 中新增的 provide/inject 來(lái)實(shí)現(xiàn)父組件向子組件注入數(shù)據(jù)，可以跨越多個(gè)層級(jí)。
  

在React中，也有對(duì)應(yīng)的三種方式：

• 父組件通過(guò) props 可以向子組件傳遞數(shù)據(jù)或者回調(diào)
• 可以通過(guò) context 進(jìn)行跨層級(jí)的通信 ，這其實(shí)和 provide/inject 起到的作用差不多。
  

可以看到， React 本身并不支持自定義事件 ，Vue中子組件向父組件傳遞消息有兩種方式： 事件和回調(diào)函數(shù)，而且Vue更傾向于使用事件 。但是 在 React 中我們都是使用回調(diào)函數(shù)的 ，這可能是他們二者最大的區(qū)別。

五、渲染模版的不同

在表層上， 模板的語(yǔ)法不同

• React是通過(guò)JSX渲染模版
• 而Vue是通過(guò)一種拓展的HTML語(yǔ)法進(jìn)行渲染
  

但其實(shí)這只是表面現(xiàn)象，畢竟 React并不必須依賴JSX 。在深層上，模板的原理不同，這才是他們的本質(zhì)區(qū)別：

• React是在組件JS代碼中，通過(guò) 原生JS實(shí)現(xiàn) 模板中的常見(jiàn)語(yǔ)法，比如插值，條件，循環(huán)等，都是通過(guò)JS語(yǔ)法實(shí)現(xiàn)的
• Vue是在和組件JS代碼分離的單獨(dú)的模板中， 通過(guò)指令來(lái)實(shí)現(xiàn)的 ，比如 條件語(yǔ)句就需要 v-if 來(lái)實(shí)現(xiàn)
  

react中 render函數(shù)是支持閉包特性的，所以我們import的組件在render中可以直接調(diào)用 。但是在Vue中， 由于模板中使用的數(shù)據(jù)都必須掛在 this 上進(jìn)行一次中轉(zhuǎn)，所以我們import 一個(gè)組件完了之后，還需要在 components 中再聲明下，這樣顯然是很奇怪但又不得不這樣的做法。

六、Vuex和Redux的區(qū)別

從表面上來(lái)說(shuō)， store 注入和使用方式有一些區(qū)別 。在 Vuex 中， $store 被直接注入到了組件實(shí)例中 ，因此可以比較靈活的使用：

• 使用dispatch和commit提交更新
• 通過(guò)mapState或者直接通過(guò)this.$store來(lái)讀取數(shù)據(jù)
  

在 Redux 中， 我們每一個(gè)組件都需要顯示的用 connect 把需要的 props 和 dispatch 連接起來(lái)。

另外 Vuex 更加靈活一些， 組件中既可以 dispatch action 也可以 commit updates ，而 Redux 中只能進(jìn)行 dispatch，并不能直接調(diào)用 reducer 進(jìn)行修改。

從實(shí)現(xiàn)原理上來(lái)說(shuō)，最大的區(qū)別是兩點(diǎn)：

• Redux 使用的是不可變數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的。 Redux每次都是用新的state替換舊的state，而Vuex是直接修改
• Redux 在檢測(cè)數(shù)據(jù)變化的時(shí)候，是通過(guò) diff 的方式比較差異的，而Vuex其實(shí)和Vue的原理一樣，是通過(guò) getter/setter來(lái)比較的（如果看Vuex源碼會(huì)知道，其實(shí)他內(nèi)部直接創(chuàng)建一個(gè)Vue實(shí)例用來(lái)跟蹤數(shù)據(jù)變化）
  

七、diff算法不同

兩者流程思維上是類似的，都是基于兩個(gè)假設(shè)（使得算法復(fù)雜度降為O(n)）：

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

但兩者源碼實(shí)現(xiàn)上有區(qū)別：

• Vue基于snabbdom庫(kù)，它有較好的速度以及模塊機(jī)制。 Vue Diff使用雙向鏈表，邊對(duì)比，邊更新DOM 。
• React主要使用 diff隊(duì)列保存需要更新哪些DOM，得到patch樹(shù)，再統(tǒng)一操作批量更新DOM。

八、事件機(jī)制不同

Vue

• Vue原生事件使用 標(biāo)準(zhǔn)Web事件
• Vue組件 自定義事件機(jī)制，是父子組件通信基礎(chǔ)
• Vue合理利用了snabbdom庫(kù)的模塊插件
  

React

• React原生事件被包裝，所有事件都冒泡到頂層document監(jiān)聽(tīng)，然后在這里合成事件下發(fā) ?；谶@套，可以跨端使用事件機(jī)制，而不是和Web DOM強(qiáng)綁定。
• React組件上無(wú)事件，父子組件通信使用props

以上就是Vue和React有哪些區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于Vue和React的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論