vue和react都是做元件化的，針對view層，支援引數和state，有虛擬dom機制，資料驅動檢視。各自配套的全域性資料儲存 vuex 和 redux也都是flux架構的實現，有action和state，資料變化會通知元件。但是vue、vuex和react、redux還是有很多不同的。
先放兩張vue + vuex 和 react + redux的執行流程圖：
是不是覺得整體架構類似，但是又有一些不同，下面我們對照上圖梳理一下哪裡不同：
元件方面（vue vs react）：
1. 響應式渲染 vs 全域性state對比：
vue元件在初始化時會通過Object.defineProperty對每一個data屬性建立對應的Wather，然後在模板編譯時收集依賴。以後只要修改data的任何一個屬性，就會觸發檢視的重新渲染，而且是精確的修改對應的vdom。
react的機制是每次setState的時候，呼叫shouldComponentUpdate，判斷state或props改變需不需要重新render，如果返回true才會渲染。預設的實現是返回true，PureComponent的shouldComponnentUpdate淺層對比了兩次state，考慮到效能，需要寫好shouldComponentUpdate。
綜上，react的 效能優化（shouldComponentUpdate）需要手動去做，而vue的響應式機制（Watcher）使得它不需要手動去優化效能。
2. 模板 vs jsx
react渲染是使用jsx，用js來操作html，列表渲染、條件判斷等都通過js來控制，而vue提供了模板的語法，支援指令、過濾器等模板功能，簡化了渲染邏輯。在react元件裡需要寫大段js才能描述清楚的邏輯，使用vue的模板可以很簡潔緊湊的表明。
模板和jsx各有優缺點，jsx全部使用js來寫邏輯，更加的靈活，也沒什麼學習成本，但是有些渲染邏輯表達會比較囉嗦。 模板因為是專門針對渲染設計的DSL，所以寫一些渲染邏輯時會特別的簡潔和緊湊，但學習成本高一些，並且擴充套件需要通過指令和過濾器的方式。
資料儲存方面（vuex vs redux）：
1. action handler vs thunk/saga/observable middleware
redux只有reducer一層，action到達reducer之前會經過一系列中介軟體。而vuex比redux多了一層，action到達mutation handler之前，會經歷中介軟體和action handler。
vuex文件中說，action handler是做一些非同步操作的，而redux中並沒有封裝這些，非同步操作是通過社群提供的redux-thunk、redux-saga或者redux-observable等中介軟體來管理的。
應用中非同步請求幾乎是必備的，vuex設計的時候多加了action handler這一層確實很方便。 react的思想是交給社群去做，通過 一些中介軟體來做非同步管理的優點是有很多可選的方案。redux棧的obserbable和saga確實比vuex棧的action handler強大的多。
2. getter vs reselect
state的資料有時候需要經過一些處理和計算才能夠使用，這段計算過程是可以複用的，react技術棧中使用社群的reselect可以做到，而且可以多層select。vuex內建了getter，可以做到複用計算過程和快取，同時getter也可以組合。
區別就像非同步的管理一樣，一個是內建了，一個是交給社群去做。交給社群去做的優勢是可以產生很多優秀的方案，但是會增加技術棧的學習成本和上手難度。內建的優勢是技術棧學習成本低、上手快，但是方案變得不可替換了。
總結
除了vue和react的 響應式和 全域性資料對比，還有 模板和jsx的區別 是實現思想的區別以外，vuex和redux的區別更多的是內建和交給社群去做的區別。
redux確實複雜，因為要組合一系列東西。社群中很多對redux封裝的庫，都是在向vuex的思路靠攏。
vue和react最主要的區別是設計思想的區別，以及功能是否內建的區別。
