react和vue都是做元件化的，整體的功能都類似，但是他們的設計思路是有很多不同的。使用react和vue，主要是理解他們的設計思路的不同。

1.資料是不是可變的

react整體是函式式的思想，把元件設計成純元件，狀態和邏輯通過引數傳入，所以在react中，是單向資料流，推崇結合immutable來實現資料不可變。react在setState之後會重新走渲染的流程，如果shouldComponentUpdate返回的是true，就繼續渲染，如果返回了false，就不會重新渲染，PureComponent就是重寫了shouldComponentUpdate，然後在裡面作了props和state的淺層對比。

image.png

而vue的思想是響應式的，也就是基於是資料可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。

image.png

總之，react的效能優化需要手動去做，而vue的效能優化是自動的，但是vue的響應式機制也有問題，就是當state特別多的時候，Watcher也會很多，會導致卡頓，所以大型應用（狀態特別多的）一般用react，更加可控。

2.通過js來操作一切，還是用各自的處理方式

react的思路是all in js，通過js來生成html，所以設計了jsx，還有通過js來操作css，社群的styled-component、jss等，

image.png

vue是把html，css，js組合到一起，用各自的處理方式，vue有單檔案元件，可以把html、css、js寫到一個檔案中，html提供了模板引擎來處理。

image.png

3.類式的元件寫法，還是宣告式的寫法

react是類式的寫法，api很少，

image.png

而vue是宣告式的寫法，通過傳入各種options，api和引數都很多。所以react結合typescript更容易一起寫，vue稍微複雜。

image.png

vue結合vue-class-component也可以實現類式的寫法，但是還是需要通過decorator來新增宣告，並不純粹。

image.png

react可以通過高階元件（Higher Order Components--HOC）來擴充套件，而vue需要通過mixins來擴充套件
一個react高階元件的例子：

image.png

image.png

vue的mixin的例子：

image.png

React剛開始也有mixin的寫法，通過React.createClass的api，不過現在很少用了。
Vue也不是不能實現高階元件，只是特別麻煩，因為Vue對與元件的option做了各種處理，想實現高階元件就要知道每一個option是怎麼處理的，然後正確的設定。具體有多複雜，可以參考下面的文章。
http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/

4.什麼功能內建，什麼交給社群去做

react做的事情很少，很多都交給社群去做，vue很多東西都是內建的，寫起來確實方便一些，
比如 redux的combineReducer就對應vuex的modules，
比如reselect就對應vuex的getter和vue元件的computed，
vuex的mutation是直接改變的原始資料，而redux的reducer是返回一個全新的state，所以redux結合immutable來優化效能，vue不需要。

總結

上面主要梳理了react和vue的4點不同：

1. 資料是不是可變的
2. 通過js操作一切還是各自的處理方式
3. 類式的元件寫法還是宣告式的寫法
4. 什麼功能內建，什麼交給社群去做

（其中第3點在vue3.0支援類式寫法之後就可以去掉了）

react整體的思路就是函式式，所以推崇純元件，資料不可變，單向資料流，當然需要雙向的地方也可以做到，比如結合redux-form，而vue是基於可變資料的，支援雙向繫結。react元件的擴充套件一般是通過高階元件，而vue元件會使用mixin。vue內建了很多功能，而react做的很少，很多都是由社群來完成的，vue追求的是開發的簡單，而react更在乎方式是否正確。

image.png

image.png

作者：凌霄光
連結：https://www.jianshu.com/p/b7cd52868e95
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。