快捷導(dǎo)航

一文總結(jié)Vue和React的異同

更新時間：2023年05月16日 10:31:24 作者：前端呂小布

這篇文章主要介紹了Vue和React的相同點不不同點，文中對比介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

相同點

Vue和React相同點非常多：

都使用Virtural DOM
都使用組件化思想，流程基本一致
都是響應(yīng)式
都有成熟的社區(qū)，都支持服務(wù)端渲染

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

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

不同點

1. 核心思想不同

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

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

1.1 核心思想不同導(dǎo)致寫法差異

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

React推崇JSX、HOC、all in js。

1.2 核心思想不同導(dǎo)致api差異

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

1.3 核心思想不同導(dǎo)致社區(qū)差異

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

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

1.4 核心思想不同導(dǎo)致未來升級方向不同

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

2. 組件實現(xiàn)不同

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

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