這篇文章主要講述了了Vue和React它們的不同之處的一些思考，不僅局限于它們本身，也會包括比如Vuex/Redux等經(jīng)常搭配使用的工具。因為涉及到的內(nèi)容很多，請認真對待接下來的內(nèi)容哦！  

監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同  

Vue通過getter/setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化，不需要特別的優(yōu)化就能達到很好的性能。  

React默認是通過比較引用的方式進行的，如果不優(yōu)化（PureComponent/shouldComponentUpdate）可能導致大量不必要的VDOM的重新渲染。  

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

因為一般都會用一個數(shù)據(jù)層的框架比如Vuex和Redux，所以這部分不作過多解釋，在最后的vuex和redux的區(qū)別中也會講到。  

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

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

1、父子組件之間，props可以雙向綁定。  

2、組件與DOM之間可以通過v-model雙向綁定。  

在Vue2.x中去掉了第一種，也就是父子組件之間不能雙向綁定了（但是提供了一個語法糖自動幫你通過事件的方式修改），并且Vue2.x已經(jīng)不鼓勵組件對自己的props進行任何修改了。  

所以現(xiàn)在我們只有組件<-->DOM之間的雙向綁定這一種。  

然而React從誕生之初就不支持雙向綁定，React一直提倡的是單向數(shù)據(jù)流，他稱之為onChange/setState()模式。  

不過由于我們一般都會用Vuex以及Redux等單向數(shù)據(jù)流的狀態(tài)管理框架，因此很多時候我們感受不到這一點的區(qū)別了。  

HoC和mixins  

在Vue中我們組合不同功能的方式是通過mixin，而在React中我們通過HoC(高階組件）。  

React最早也是使用mixins的，不過后來他們覺得這種方式對組件侵入太強會導致很多問題，就棄用了mixinx轉(zhuǎn)而使用HoC，關(guān)于mixin究竟哪里不好，可以參考React官方的這篇文章MixinsConsideredHarmful  

而Vue一直是使用mixin來實現(xiàn)的。  

為什么Vue不采用HoC的方式來實現(xiàn)呢？  

高階組件本質(zhì)就是高階函數(shù)，React的組件是一個純粹的函數(shù)，所以高階函數(shù)對React來說非常簡單。  

但是Vue就不行了，Vue中組件是一個被包裝的函數(shù)，并不簡單的就是我們定義組件的時候傳入的對象或者函數(shù)。比如我們定義的模板怎么被編譯的？比如聲明的props怎么接收到的？這些都是vue創(chuàng)建組件實例的時候隱式干的事。由于vue默默幫我們做了這么多事，所以我們自己如果直接把組件的聲明包裝一下，返回一個高階組件，那么這個被包裝的組件就無法正常工作了。  

組件通信的區(qū)別  

其實這部分兩個比較相似。  

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

父組件通過props向子組件傳遞數(shù)據(jù)或者回調(diào)，雖然可以傳遞回調(diào)，但是我們一般只傳數(shù)據(jù)，而通過事件的機制來處理子組件向父組件的通信  

子組件通過事件向父組件發(fā)送消息。  

通過V2.2.0中新增的provide/inject來實現(xiàn)父組件向子組件注入數(shù)據(jù)，可以跨越多個層級。  

另外有一些比如訪問$parent/$children等比較dirty的方式這里就不講了。  

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

父組件通過props可以向子組件傳遞數(shù)據(jù)或者回調(diào)。  

可以通過context進行跨層級的通信，這其實和provide/inject起到的作用差不多。  

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

模板渲染方式的不同  

在表層上，模板的語法不同。  

React是通過JSX渲染模板。  

而Vue是通過一種拓展的HTML語法進行渲染。  

但其實這只是表面現(xiàn)象，畢竟React并不必須依賴JSX。  

在深層上，模板的原理不同，這才是他們的本質(zhì)區(qū)別：  

React是在組件JS代碼中，通過原生JS實現(xiàn)模板中的常見語法，比如插值，條件，循環(huán)等，都是通過JS語法實現(xiàn)的。  

Vue是在和組件JS代碼分離的單獨的模板中，通過指令來實現(xiàn)的，比如條件語句就需要v-if來實現(xiàn)。  

對這一點，我個人比較喜歡React的做法，因為他更加純粹更加原生，而Vue的做法顯得有些獨特，會把HTML弄得很亂。舉個例子，說明React的好處：  

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

Vuex和Redux的區(qū)別  

從表面上來說，store注入和使用方式有一些區(qū)別。  

在Vuex中，$store被直接注入到了組件實例中，因此可以比較靈活的使用：  

使用dispatch和commit提交更新  

通過mapState或者直接通過this.$store來讀取數(shù)據(jù)。  

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

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

從實現(xiàn)原理上來說，最大的區(qū)別是兩點：  

Redux使用的是不可變數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的。Redux每次都是用新的state替換舊的state，而Vuex是直接修改。  

Redux在檢測數(shù)據(jù)變化的時候，是通過diff的方式比較差異的，而Vuex其實和Vue的原理一樣，是通過getter/setter來比較的（如果看Vuex源碼會知道，其實他內(nèi)部直接創(chuàng)建一個Vue實例用來跟蹤數(shù)據(jù)變化）。  

而這兩點的區(qū)別，其實也是因為React和Vue的設(shè)計理念上的區(qū)別。React更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用，非常的科班化。相比之下，Vue更偏向于簡單迅速的解決問題，更靈活，不那么嚴格遵循條條框框。因此也會給人一種大型項目用React，小型項目用Vue的感覺。