關於Vue和React區別的一些筆記

做者：lihongxun945

github.com/lihongxun94…

這篇文章記錄我在使用Vue和React的時候，對他們的不一樣之處的一些思考，不只侷限於他們自己，也會包括好比 Vuex/Redux 等常常搭配使用的工具。由於涉及到的內容不少，可能下面的每個點都能寫成一篇文章，此次先簡單作一個概要，等我有空作一個詳細的專題出來。

監聽數據變化的實現原理不一樣

Vue 經過 getter/setter 以及一些函數的劫持，能精確知道數據變化，不須要特別的優化就能達到很好的性能

React 默認是經過比較引用的方式進行的，若是不優化（PureComponent/shouldComponentUpdate）可能致使大量沒必要要的VDOM的從新渲染

爲何 React 不精確監聽數據變化呢？這是由於 Vue 和 React 設計理念上的區別，Vue 使用的是可變數據，而React更強調數據的不可變。因此應該說沒有好壞之分，Vue更加簡單，而React構建大型應用的時候更加魯棒。

由於通常都會用一個數據層的框架好比 Vuex 和 Redux，因此這部分不做過多解釋，在最後的 vuex 和 redux的區別 中也會講到。

數據流的不一樣

你們都知道Vue中默認是支持雙向綁定的。在Vue1.0中咱們能夠實現兩種雙向綁定：

父子組件之間，props 能夠雙向綁定

組件與DOM之間能夠經過 v-model 雙向綁定

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

因此如今咱們只有 組件 <--> DOM 之間的雙向綁定這一種。

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

不過因爲咱們通常都會用 Vuex 以及 Redux 等單向數據流的狀態管理框架，所以不少時候咱們感覺不到這一點的區別了。

HoC 和 mixins

在 Vue 中咱們組合不一樣功能的方式是經過 mixin，而在React中咱們經過 HoC (高階組件）。

React 最先也是使用 mixins 的，不事後來他們以爲這種方式對組件侵入太強會致使不少問題，就棄用了 mixinx 轉而使用 HoC，關於mixin究竟哪裏很差，能夠參考React官方的這篇文章 Mixins Considered Harmful

而 Vue 一直是使用 mixin 來實現的。

爲何 Vue 不採用 HoC 的方式來實現呢？

高階組件本質就是高階函數，React 的組件是一個純粹的函數，因此高階函數對React來講很是簡單。

可是Vue就不行了，Vue中組件是一個被包裝的函數，並不簡單的就是咱們定義組件的時候傳入的對象或者函數。好比咱們定義的模板怎麼被編譯的？好比聲明的props怎麼接收到的？這些都是vue建立組件實例的時候隱式乾的事。因爲vue默默幫咱們作了這麼多事，因此咱們本身若是直接把組件的聲明包裝一下，返回一個高階組件，那麼這個被包裝的組件就沒法正常工做了。

推薦一篇很棒的文章講的是vue中如何實現高階組件 探索Vue高階組件

組件通訊的區別

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

在Vue 中有三種方式能夠實現組件通訊：

父組件經過 props 向子組件傳遞數據或者回調，雖然能夠傳遞迴調，可是咱們通常只傳數據，而經過 事件的機制來處理子組件向父組件的通訊

子組件經過 事件 向父組件發送消息

經過 V2.2.0 中新增的 provide/inject 來實現父組件向子組件注入數據，能夠跨越多個層級。

另外有一些好比訪問 children等比較dirty的方式這裏就不講了。

在 React 中，也有對應的三種方式：

父組件經過 props 能夠向子組件傳遞數據或者回調

能夠經過 context 進行跨層級的通訊，這其實和 provide/inject 起到的做用差很少。

能夠看到，React 自己並不支持自定義事件，Vue中子組件向父組件傳遞消息有兩種方式：事件和回調函數，並且Vue更傾向於使用事件。可是在 React 中咱們都是使用回調函數的，這多是他們兩者最大的區別。

模板渲染方式的不一樣

在表層上， 模板的語法不一樣

React 是經過JSX渲染模板

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

但其實這只是表面現象，畢竟React並沒必要須依賴JSX。

在深層上，模板的原理不一樣，這纔是他們的本質區別：

React是在組件JS代碼中，經過原生JS實現模板中的常見語法，好比插值，條件，循環等，都是經過JS語法實現的

Vue是在和組件JS代碼分離的單獨的模板中，經過指令來實現的，好比條件語句就須要 v-if 來實現

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

react中render函數是支持閉包特性的，因此咱們import的組件在render中能夠直接調用。可是在Vue中，因爲模板中使用的數據都必須掛在 this 上進行一次中轉，因此咱們import 一個組件完了以後，還須要在 components 中再聲明下，這樣顯然是很奇怪但又不得不這樣的作法。

Vuex 和 Redux 的區別

從表面上來講，store 注入和使用方式有一些區別。

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

使用 dispatch 和 commit 提交更新

經過 mapState 或者直接經過 this.$store 來讀取數據

在 Redux 中，咱們每個組件都須要顯示的用 connect 把須要的 props 和 dispatch 鏈接起來。

另外 Vuex 更加靈活一些，組件中既能夠 dispatch action 也能夠 commit updates，而 Redux 中只能進行 dispatch，並不能直接調用 reducer 進行修改。

從實現原理上來講，最大的區別是兩點：

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

Redux 在檢測數據變化的時候，是經過 diff 的方式比較差別的，而Vuex其實和Vue的原理同樣，是經過 getter/setter來比較的（若是看Vuex源碼會知道，其實他內部直接建立一個Vue實例用來跟蹤數據變化）

而這兩點的區別，其實也是由於 React 和 Vue的設計理念上的區別。React更偏向於構建穩定大型的應用，很是的科班化。相比之下，Vue更偏向於簡單迅速的解決問題，更靈活，不那麼嚴格遵循條條框框。所以也會給人一種大型項目用React，小型項目用 Vue 的感受。