前幾年我一直在使用 React。最初僅有 React，后來使用 Redux 和 React 的其他庫（react-router、react-redux、prop-types 等）配合使用。我喜歡 React 的簡單和方便，使用 React 的時光一直都很快樂。我喜歡這個時代，有太多的好工具幫助我們更快更好地開發(fā)應(yīng)用。
近三個月我在用 Vue 構(gòu)建 Web 應(yīng)用，在此我想分享一些我作為一名 React 擁護(hù)者的 Vue 使用經(jīng)驗(yàn)。我不想寫成一篇 Vue/React 比較的文章，這種文章太多了，包括官方的 Vue 文檔：
https://vuejs.org/v2/guide/comparison.html
它只是一些關(guān)于切換庫的個人觀點(diǎn)。
如果你使用過 Vue 和 React，或者像我一樣剛剛從 React 切換到 Vue 正在適應(yīng)，或者只是想多一些了解，我希望這篇文章能對你有幫助。
React 和 Angular 相似的地方
相比 React，Vue 有時更多地被拿來和 Angular 比較。實(shí)際上，瀏覽 Vue 模板時我們首先看到的就是雙向綁定和 directive，與 Angular 非常類似：
盡管 Vue 支持 JSX，但通常的方法還是將模板和 JavaScript 分開。雖然React JSX 的語法很像原生語法，并且反映了通常的 JavaScript 語法，但 Vue 的模板語法非常高級，它包含 directive、快捷方式和條件渲染，使得 Vue 更像 Angular。不過，相似性也就到此為止了。
當(dāng)然，前后端使用同一種模板可能會有很大好處（比如 node.js/Pug + Vue/Pug），而且盡管 Vue 提供的眾多 directive 可能很有用，但對于我來說，從 React 的 JSX 切換到 Vue 的模板依然很痛苦。
Redux vs. Vuex
在應(yīng)用中，React 通常會與某種數(shù)據(jù)流庫結(jié)合使用，最流行的就是 Redux。Vue 也有個類似的數(shù)據(jù)流庫，叫做 Vuex，我很高興地發(fā)現(xiàn)它和 Redux 非常相似。實(shí)際上，從 Redux 切換到 Vuex 沒有任何痛苦，因?yàn)榕c React 跟 Vue 相比，這兩個庫有更多的共同點(diǎn)。
主要的區(qū)別就是 Redux 嚴(yán)重依賴于狀態(tài)的不可修改性。原因就是 Redux 從 React 的思想而來：
https://redux.js.org/faq/immutable-data#why-is-immutability-required-by-redux
而且盡管 React 本身能處理可改變的數(shù)據(jù)，但在 React 中的推薦做法是不要修改 props 或 state 的數(shù)據(jù)：
https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data
以便 React 獲得最好的效率。
在 React 中，組件 state 的變化會觸發(fā)該組件以下的整個組件子樹的重新渲染。為了避免不必要的子組件重新渲染， 我們需要使用 PureComponent，或盡量實(shí)現(xiàn) shouldComponentUpdate。還需要使用不可變的數(shù)據(jù)結(jié)構(gòu)讓 state 的變化更容易被優(yōu)化：
https://vuejs.org/v2/guide/comparison.html#Optimization-Efforts
然而 Vuex 完全不關(guān)心 state 是否不可修改。
在 Vue 中，組件的依賴會自動在渲染過程中跟蹤，因此當(dāng) state 發(fā)生變化時，系統(tǒng)可以精確地知道哪個組件需要渲染：
https://vuejs.org/v2/guide/comparison.html#Optimization-Efforts
因此，React/Vue 與組件交互的方式有一些區(qū)別，下面我來介紹下這些區(qū)別。
Dispatch 和 Commit
Redux 中的數(shù)據(jù)流十分嚴(yán)格且直接。組件會 dispatch action，而 action 由 action 的創(chuàng)建器函數(shù)返回。然后 reducer 會根據(jù)收到的 action 返回新的 state。最后，組件會通過 store 監(jiān)聽 state 的變化，并在 connect() 函數(shù)的幫助下訪問state中的屬性。
每個 action 都會通過 action 創(chuàng)建器。盡管理論上來說可以直接從組件中 dispatch 一個 action，但通常不這樣做。action 的語法本身就鼓勵我們將 action 的邏輯封裝在 action 創(chuàng)建器函數(shù)中，即使是最簡單的 action：
盡管 Vuex 的數(shù)據(jù)流很相似，但它并不嚴(yán)格要求組件與 state 交互的方式。首先，組件可以 dispatch action。這通常是一些異步動作，比如從后臺獲取數(shù)據(jù)等。
之后，action 會 commit 一個 mutation。mutation 函數(shù)與 reducer 的相似之處就是，它是唯一能夠改變 state 的東西。但還有另一種方法：組件可以直接 commit 一個 mutation，有時候跳過 action 直接修改數(shù)據(jù)是很方便的 。
從組件 commit mutation 的行為不僅沒有被嚴(yán)格禁止，Vuex 的文檔甚至鼓勵在異步的情況下直接使用 action：
https://vuex.vuejs.org/en/mutations.html#committing-mutations-in-components
由于我習(xí)慣了 React 的更嚴(yán)格的數(shù)據(jù)流，我更主張嚴(yán)格分離的概念——不管什么情況下，即使是同步或者非常簡單的情況，commit mutation 也應(yīng)該只能由 action 實(shí)施。
如果組件只能通過 action 來創(chuàng)建 mutation，那么組件和 mutation 之間就會有一個額外的層，保證組件和 mutation 之間的低耦合，最終使得代碼更容易維護(hù)和修改。
從 store 中獲取數(shù)據(jù)
為了與 React 組件內(nèi)部的 store 交互，我們需要使用 connect() 函數(shù)。我認(rèn)為 React/Redux 最讓人不爽的一點(diǎn)就是，你不得不判斷哪些組件該用 connect()，哪些不該用。使用 connect() 的組件通常被稱為容器，而不使用 connect() 的一般稱為表現(xiàn)組件，或者“笨”組件。
但 connect() 不能用得太多，因?yàn)樗男阅芎懿?。但如果只在頂層組件使用的話，需要傳遞給下層組件的 props 就會迅速增多。這個問題曾多次被討論，如這里：
https://redux.js.org/docs/faq/ReactRedux.html#react-multiple-components
和這里
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
但實(shí)際上，即使容器組件的數(shù)量還算合理，傳遞給下層的 props 也挺讓人頭疼的。
我很意外地返現(xiàn)，在 Vue 中我根本不需要考慮這個問題。store 可以從任何 Vue 組件中訪問，非常簡單：
也就是說，從一個組件傳遞給另一個組件的 props 數(shù)量非常少，而且只需要傳遞那些沒有保存在 store 中的數(shù)據(jù)。不過，在 Vue 中傳遞 props 的語法卻非常不方便：
這里我們要給子組件（TodoItem）傳遞 props，但卻不能在子組件定義的位置傳遞，而必須在模板里傳遞。相比之下，React 中的 props 傳遞更加自然，是在子組件渲染時完成的：
盡管在 Vue 中傳遞 props 很不方便，但好處是，由于 store 能在任何組件中訪問，實(shí)際需要傳遞的 props 比 React 中少得多，而在 React 中，即使有足夠多的容器組件，平均每個組件收到的 props 數(shù)量也非常大。
更新：新的 React Context API（https://reactjs.org/docs/context.html）提供了一種在組件樹中直接訪問數(shù)據(jù)而不需要在每層手動傳遞 props。
結(jié)論
如開頭所說，本文只是一些我在從 React 遷移到 Vue 時發(fā)現(xiàn)的一些最重要的問題。這并不是一篇嚴(yán)謹(jǐn)?shù)谋容^，不能作為選擇庫的依據(jù)。但如果你也像我一樣不得不從一個庫切換到另一個庫，或者只是想了解更多的關(guān)于兩個庫的信息，這篇文章也許會有幫助。
總結(jié)一下重點(diǎn)：
1、Vue 默認(rèn)不包含 JSX，很強(qiáng)調(diào)腳本和模板分離；
2、Redux 和 Vuex 背后的數(shù)據(jù)流思想很相似；
3、Redux 十分依賴于 state 的不可改變性，而 Vuex 不關(guān)心 state 是否不可改變；
4、Vue 允許 dispatch，也允許直接從組件中 commit，但最好還是嚴(yán)格些，只允許 dispatch 會比較好；
5、任何 Vue 組件都可以直接訪問 store。
聯(lián)系客服
