React與Vue的一些差異
前端寫了這麼長久了，各種框架都多多少少也用過了，今天整理一篇Vue和React的相關文章希望對讀者有所幫助。
一、監聽資料變化的實現原理不同
Vue 通過 getter/setter 以及一些函式的劫持，能精確知道資料變化，不需要特別的優化就能達到很好的效能
React 預設是通過比較引用的方式進行的，如果不優化（PureComponent/shouldComponentUpdate）可能導致大量不必要的VDOM的重新渲染
為什麼 React 不精確監聽資料變化呢？這是因為 Vue 和 React 設計理念上的區別，Vue 使用的是可變資料，而React更強調資料的不可變。所以應該說沒有好壞之分，Vue更加簡單，而React構建大型應用的時候更加魯棒（健壯）。
二、資料流的不同
大家都知道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默默幫我們做了這麼多事，所以我們自己如果直接把元件的宣告包裝一下，返回一個高階元件，那麼這個被包裝的元件就無法正常工作了。
四、模板渲染方式的不同
在表層上， 模板的語法不同
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 的感覺。
以上文章根據個人觀點以及線上資源整理，如有侵權請聯絡作者刪除！