文章詳情頁

一文總結Vue和React的異同

瀏覽：227日期：2022-06-10 13:05:16

相同點

Vue和React相同點非常多：

都使用Virtural DOM
都使用組件化思想，流程基本一致
都是響應式
都有成熟的社區，都支持服務端渲染

Vue和React實現原理和流程基本一致，都是使用Virtual DOM + Diff算法。不管是Vue的template模板 + options api寫法，還是React的Class或者Function（js 的class寫法也是function函數的一種）寫法，底層最終都是為了生成render函數，render函數執行返回VNode（虛擬DOM的數據結構，本質上是棵樹）。當每一次UI更新時，總會根據render重新生成最新的VNode，然后跟以前緩存起來老的VNode進行比對，再使用Diff算法（框架核心）去真正更新真實DOM（虛擬DOM是JS對象結構，同樣在JS引擎中，而真實DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實DOM開銷要小的多）。
Vue和React通用流程：vue template/react jsx -> render函數 -> 生成VNode -> 當有變化時，新老VNode diff -> diff算法對比，并真正去更新真實DOM。
核心還是Virtual DOM，為什么Vue和React都選擇Virtual DOM（React首創VDOM，Vue2.0開始引入VDOM）？，個人認為主要有以下幾點：

減少直接操作DOM。框架給我們提供了屏蔽底層dom書寫的方式，減少頻繁的整更新dom，同時也使得數據驅動視圖
為函數式UI編程提供可能（React核心思想）
可以跨平臺，渲染到DOM（web）之外的平臺。比如ReactNative，Weex

不同點

1. 核心思想不同

Vue早期定位是盡可能的降低前端開發的門檻（這跟Vue作者是獨立開發者也有關系）。所以Vue推崇靈活易用（漸進式開發體驗），數據可變，雙向數據綁定（依賴收集）。

React早期口號是Rethinking Best Practices。背靠大公司Facebook的React，從開始起就不缺關注和用戶，而且React想要做的是用更好的方式去顛覆前端開發方式（事實上跟早期jquery稱霸前端，的確是顛覆了）。所以React推崇函數式編程（純組件），數據不可變以及單向數據流。函數式編程最大的好處是其穩定性（無副作用）和可測試性（輸入相同，輸出一定相同），所以通常大家說的React適合大型應用，根本原因還是在于其函數式編程。
由于兩者核心思想的不同，所以導致Vue和React許多外在表現不同（從開發層面看）。

1.1 核心思想不同導致寫法差異

Vue推崇template（簡單易懂，從傳統前端轉過來易于理解）、單文件vue。而且雖然Vue2.0以后使用了Virtual DOM，使得Vue也可以使用JSX（bebel工具轉換支持），但Vue官方依然首先推薦template，這跟Vue的核心思想和定位有一定關系。

React推崇JSX、HOC、all in js。

1.2 核心思想不同導致api差異

Vue定位簡單易上手，基于template模板 + options API，所以不可避免的有較多的概念和api。比如template模板中需要理解slot、filter、指令等概念和api，options API中需要理解watch、computed（依賴收集）等概念和api。
React本質上核心只有一個Virtual DOM + Diff算法，所以API非常少，知道setState就能開始開發了。

1.3 核心思想不同導致社區差異

由于Vue定義簡單易上手，能快速解決問題，所以很多常見的解決方案，是Vue官方主導開發和維護。比如狀態管理庫Vuex、路由庫Vue-Router、腳手架Vue-CLI、Vutur工具等。屬于那種大包大攬，遇到某類通用問題，只需要使用官方給出的解決方案即可。

React只關注底層，上層應用解決方案基本不插手，連最基礎的狀態管理早期也只是給出flow單向數據流思想，大部分都丟給社區去解決。比如狀態管理庫方面，有redux、mobx、redux-sage、dva等一大堆（選擇困難癥犯了），所以這也造就了React社區非常繁榮。同時由于有社區做上層應用解決方案，所以React團隊有更多時間專注于底層升級，比如花了近2年時間把底層架構改為Fiber架構，以及創造出React Hooks來替換HOC，Suspense等。更多框架設計思想可看尤雨溪 - 在框架設計中尋求平衡 (opens new window)。

1.4 核心思想不同導致未來升級方向不同

核心思想不同，決定了Vue和React未來不管怎么升級變化，Vue和React考慮的基本盤不變。
Vue依然會定位簡單易上手（漸進式開發），依然是考慮通過依賴收集來實現數據可變。這點從Vue3核心更新內容可以看到：template語法基本不變、options api只增加了setup選項（composition api）、基于依賴收集（Proxy）的數據可變。更多Vue3具體更新內容可看筆者總結 Vue3設計思想 (opens new window)或者尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播 (opens new window)。
React的函數式編程這個基本盤不會變。React核心思想，是把UI作為Basic Type，比如String、Array類型，然后經過render處理，轉換為另外一個value（純函數）。從React Hooks可以看出，React團隊致力于組件函數式編程，（純組件，無class組件），盡量減少副作用（減少this，this會引起副作用）。

2. 組件實現不同

Vue源碼實現是把options掛載到Vue核心類上，然后再new Vue({options})拿到實例（vue組件的script導出的是一個掛滿options的純對象而已）。所以options api中的this指向內部Vue實例，對用戶是不透明的，所以需要文檔去說明this.s l o t 、 t h i s . slot、this.slot、this.xxx這些api。另外Vue插件都是基于Vue原型類基礎之上建立的，這也是Vue插件使用Vue.install的原因，因為要確保第三方庫的Vue和當前應用的Vue對象是同一個。

React內部實現比較簡單，直接定義render函數以生成VNode，而React內部使用了四大組件類包裝VNode，不同類型的VNode使用相應的組件類處理，職責劃分清晰明了（后面的Diff算法也非常清晰）。React類組件都是繼承自React.Component類，其this指向用戶自定義的類，對用戶來說是透明的。

3. 響應式原理不同

Vue

Vue依賴收集，自動優化，數據可變。
Vue遞歸監聽data的所有屬性,直接修改。
當數據改變時，自動找到引用組件重新渲染。

React

React基于狀態機，手動優化，數據不可變，需要setState驅動新的State替換老的State。
當數據改變時，以組件為根目錄，默認全部重新渲染

4. diff算法不同

兩者流程思維上是類似的，都是基于兩個假設（使得算法復雜度降為O(n)）：

不同的組件產生不同的 DOM 結構。當type不相同時，對應DOM操作就是直接銷毀老的DOM，創建新的DOM。
同一層次的一組子節點，可以通過唯一的 key 區分。

但兩者源碼實現上有區別：
Vue基于snabbdom庫，它有較好的速度以及模塊機制。Vue Diff使用雙向鏈表，邊對比，邊更新DOM。
React主要使用diff隊列保存需要更新哪些DOM，得到patch樹，再統一操作批量更新DOM。

5. 事件機制不同

Vue

Vue原生事件使用標準Web事件
Vue組件自定義事件機制，是父子組件通信基礎
Vue合理利用了snabbdom庫的模塊插件