這篇文章記錄我在使用Vue和React的時(shí)候，對他們的不同之處的一些思考颊郎，不僅局限于他們本身咏连，也會包括比如?Vuex/Redux?等經(jīng)常搭配使用的工具诫舅。因?yàn)樯婕暗降膬?nèi)容很多，可能下面的每一個(gè)點(diǎn)都能寫成一篇文章功氨，這次先簡單做一個(gè)概要序苏，等我有空做一個(gè)詳細(xì)的專題出來。
監(jiān)聽數(shù)據(jù)變化的實(shí)現(xiàn)原理不同
Vue 通過?getter/setter?以及一些函數(shù)的劫持捷凄，能精確知道數(shù)據(jù)變化忱详，不需要特別的優(yōu)化就能達(dá)到很好的性能
React 默認(rèn)是通過比較引用的方式進(jìn)行的，如果不優(yōu)化（PureComponent/shouldComponentUpdate）可能導(dǎo)致大量不必要的VDOM的重新渲染
為什么 React 不精確監(jiān)聽數(shù)據(jù)變化呢纵势？這是因?yàn)?Vue 和 React 設(shè)計(jì)理念上的區(qū)別踱阿，Vue 使用的是可變數(shù)據(jù)，而React更強(qiáng)調(diào)數(shù)據(jù)的不可變钦铁。所以應(yīng)該說沒有好壞之分软舌，Vue更加簡單，而React構(gòu)建大型應(yīng)用的時(shí)候更加魯棒牛曹。
因?yàn)橐话愣紩靡粋€(gè)數(shù)據(jù)層的框架比如?Vuex?和?Redux佛点，所以這部分不作過多解釋，在最后的?vuex 和 redux的區(qū)別?中也會講到黎比。
數(shù)據(jù)流的不同
大家都知道Vue中默認(rèn)是支持雙向綁定的超营。在Vue1.0中我們可以實(shí)現(xiàn)兩種雙向綁定：
父子組件之間，props?可以雙向綁定
組件與DOM之間可以通過?v-model?雙向綁定
在 Vue2.x 中去掉了第一種阅虫，也就是父子組件之間不能雙向綁定了（但是提供了一個(gè)語法糖自動幫你通過事件的方式修改）演闭，并且 Vue2.x 已經(jīng)不鼓勵(lì)組件對自己的 props 進(jìn)行任何修改了。
所以現(xiàn)在我們只有?組件 <--> DOM?之間的雙向綁定這一種颓帝。
然而 React 從誕生之初就不支持雙向綁定米碰，React一直提倡的是單向數(shù)據(jù)流，他稱之為?onChange/setState()模式购城。
不過由于我們一般都會用?Vuex?以及?Redux?等單向數(shù)據(jù)流的狀態(tài)管理框架吕座，因此很多時(shí)候我們感受不到這一點(diǎn)的區(qū)別了。
HoC 和 mixins
在 Vue 中我們組合不同功能的方式是通過 mixin瘪板，而在React中我們通過 HoC (高階組件）吴趴。
React 最早也是使用?mixins?的，不過后來他們覺得這種方式對組件侵入太強(qiáng)會導(dǎo)致很多問題侮攀，就棄用了 mixinx 轉(zhuǎn)而使用?HoC锣枝，關(guān)于mixin究竟哪里不好厢拭，可以參考React官方的這篇文章?Mixins Considered Harmful
而 Vue 一直是使用 mixin 來實(shí)現(xiàn)的。
為什么 Vue 不采用 HoC 的方式來實(shí)現(xiàn)呢惊橱？
高階組件本質(zhì)就是高階函數(shù)蚪腐，React 的組件是一個(gè)純粹的函數(shù)，所以高階函數(shù)對React來說非常簡單税朴。
但是Vue就不行了回季，Vue中組件是一個(gè)被包裝的函數(shù)，并不簡單的就是我們定義組件的時(shí)候傳入的對象或者函數(shù)正林。比如我們定義的模板怎么被編譯的泡一？比如聲明的props怎么接收到的？這些都是vue創(chuàng)建組件實(shí)例的時(shí)候隱式干的事觅廓。由于vue默默幫我們做了這么多事鼻忠，所以我們自己如果直接把組件的聲明包裝一下，返回一個(gè)高階組件杈绸，那么這個(gè)被包裝的組件就無法正常工作了帖蔓。
推薦一篇很棒的文章講的是vue中如何實(shí)現(xiàn)高階組件?探索Vue高階組件
組件通信的區(qū)別
其實(shí)這部分兩個(gè)比較相似。
在Vue 中有三種方式可以實(shí)現(xiàn)組件通信：
父組件通過?props?向子組件傳遞數(shù)據(jù)或者回調(diào)瞳脓，雖然可以傳遞回調(diào)塑娇，但是我們一般只傳數(shù)據(jù)，而通過 事件的機(jī)制來處理子組件向父組件的通信
子組件通過 事件 向父組件發(fā)送消息
通過?V2.2.0?中新增的?provide/inject?來實(shí)現(xiàn)父組件向子組件注入數(shù)據(jù)劫侧，可以跨越多個(gè)層級埋酬。
另外有一些比如訪問?$parent/$children等比較dirty的方式這里就不講了。
在 React 中烧栋，也有對應(yīng)的三種方式：
父組件通過?props?可以向子組件傳遞數(shù)據(jù)或者回調(diào)
可以通過?context?進(jìn)行跨層級的通信写妥，這其實(shí)和?provide/inject?起到的作用差不多。
可以看到审姓，React 本身并不支持自定義事件珍特，Vue中子組件向父組件傳遞消息有兩種方式：事件和回調(diào)函數(shù)，而且Vue更傾向于使用事件魔吐。但是在 React 中我們都是使用回調(diào)函數(shù)的次坡，這可能是他們二者最大的區(qū)別。
模板渲染方式的不同
在表層上画畅， 模板的語法不同
React 是通過JSX渲染模板
而Vue是通過一種拓展的HTML語法進(jìn)行渲染
但其實(shí)這只是表面現(xiàn)象，畢竟React并不必須依賴JSX宋距。
在深層上轴踱，模板的原理不同，這才是他們的本質(zhì)區(qū)別：
React是在組件JS代碼中谚赎，通過原生JS實(shí)現(xiàn)模板中的常見語法淫僻，比如插值诱篷，條件，循環(huán)等雳灵，都是通過JS語法實(shí)現(xiàn)的
Vue是在和組件JS代碼分離的單獨(dú)的模板中棕所，通過指令來實(shí)現(xiàn)的，比如條件語句就需要?v-if?來實(shí)現(xiàn)
對這一點(diǎn)悯辙，我個(gè)人比較喜歡React的做法琳省，因?yàn)樗蛹兇飧釉鳹ue的做法顯得有些獨(dú)特躲撰，會把HTML弄得很亂针贬。舉個(gè)例子，說明React的好處：
react中render函數(shù)是支持閉包特性的拢蛋，所以我們import的組件在render中可以直接調(diào)用桦他。但是在Vue中，由于模板中使用的數(shù)據(jù)都必須掛在?this?上進(jìn)行一次中轉(zhuǎn)谆棱，所以我們import?一個(gè)組件完了之后快压，還需要在?components?中再聲明下，這樣顯然是很奇怪但又不得不這樣的做法垃瞧。
Vuex 和 Redux 的區(qū)別
從表面上來說蔫劣，store 注入和使用方式有一些區(qū)別。
在 Vuex 中皆警，$store?被直接注入到了組件實(shí)例中拦宣，因此可以比較靈活的使用：
使用?dispatch?和?commit?提交更新
通過?mapState?或者直接通過?this.$store?來讀取數(shù)據(jù)
在 Redux 中，我們每一個(gè)組件都需要顯示的用?connect?把需要的?props?和?dispatch?連接起來信姓。
另外 Vuex 更加靈活一些鸵隧，組件中既可以?dispatch?action 也可以?commit?updates，而 Redux 中只能進(jìn)行?dispatch意推，并不能直接調(diào)用 reducer 進(jìn)行修改豆瘫。
從實(shí)現(xiàn)原理上來說，最大的區(qū)別是兩點(diǎn)：
Redux 使用的是不可變數(shù)據(jù)菊值，而Vuex的數(shù)據(jù)是可變的外驱。Redux每次都是用新的state替換舊的state，而Vuex是直接修改
Redux 在檢測數(shù)據(jù)變化的時(shí)候腻窒，是通過 diff 的方式比較差異的昵宇，而Vuex其實(shí)和Vue的原理一樣，是通過?getter/setter來比較的（如果看Vuex源碼會知道儿子，其實(shí)他內(nèi)部直接創(chuàng)建一個(gè)Vue實(shí)例用來跟蹤數(shù)據(jù)變化）
而這兩點(diǎn)的區(qū)別瓦哎，其實(shí)也是因?yàn)?React 和 Vue的設(shè)計(jì)理念上的區(qū)別。React更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用，非常的科班化蒋譬。相比之下割岛，Vue更偏向于簡單迅速的解決問題，更靈活犯助，不那么嚴(yán)格遵循條條框框癣漆。因此也會給人一種大型項(xiàng)目用React，小型項(xiàng)目用 Vue 的感覺剂买。
