監(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í)候更加棒隧熙。因?yàn)橐话愣紩?huì)用一個(gè)數(shù)據(jù)層的框架，比如 Vuex 和 Redux幻林，所以這部分不作過(guò)多解釋?zhuān)谧詈蟮?vuex 和 redux 的區(qū)別中也會(huì)講到贱鼻。
數(shù)據(jù)流的不同
大家都知道Vue中默認(rèn)是支持雙向綁定的宴卖。在Vue1.0中我們可以實(shí)現(xiàn)兩種雙向綁定：
父子組件之間，props 可以雙向綁定
組件與DOM之間可以通過(guò) v-model 雙向綁定
在 Vue2.x 中去掉了第一種邻悬，也就是父子組件之間不能雙向綁定了（但是提供了一個(gè)語(yǔ)法糖自動(dòng)幫你通過(guò)事件的方式修改）症昏，并且 Vue2.x 已經(jīng)不鼓勵(lì)組件對(duì)自己的 props 進(jìn)行任何修改了。所以現(xiàn)在我們只有組件 <--> DOM 之間的雙向綁定這一種父丰。
然而 React 從誕生之初就不支持雙向綁定肝谭，React一直提倡的是單向數(shù)據(jù)流，他稱(chēng)之為 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)呢觅捆？
高階組件本質(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ū)別
其實(shí)這部分兩個(gè)比較相似扛禽。在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 并不必須依賴(lài) 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)
對(duì)這一點(diǎn)借杰，我個(gè)人比較喜歡React的做法过吻，因?yàn)樗蛹兇飧釉鳹ue的做法顯得有些獨(dú)特蔗衡，會(huì)把HTML弄得很亂纤虽。舉個(gè)例子，說(shuō)明React的好處：
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)比較的（其實(shí)他內(nèi)部直接創(chuàng)建一個(gè)Vue實(shí)例用來(lái)跟蹤數(shù)據(jù)變化）
而這兩點(diǎn)的區(qū)別，其實(shí)也是因?yàn)?React 和 Vue的設(shè)計(jì)理念上的區(qū)別区端。React 更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用值漫，非常的科班化。相比之下织盼，Vue 更偏向于簡(jiǎn)單迅速的解決問(wèn)題杨何，更靈活，不那么嚴(yán)格遵循條條框框沥邻。因此也會(huì)給人一種大型項(xiàng)目用 React危虱，小型項(xiàng)目用 Vue 的感覺(jué)。
