快捷導(dǎo)航

一文帶你了解Vue?和?React的區(qū)別

更新時(shí)間：2023年05月29日 08:25:03 作者：沐華

這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個(gè)框架，不像兩個(gè)?API，要說(shuō)細(xì)節(jié)上的區(qū)別就太多太多了，本文就簡(jiǎn)單的帶大家說(shuō)說(shuō)Vue?和?React?的區(qū)別,需要的朋友可以參考下

說(shuō)說(shuō) Vue 和 React 的區(qū)別

青銅級(jí)

只要真正了解一些，或者用過(guò)兩個(gè)框架開(kāi)發(fā)，就一定能說(shuō)上來(lái)的一些語(yǔ)法層面：

Vue API 多，React API 少
Vue 雙向綁定，修改數(shù)據(jù)自動(dòng)更新視圖，而 React 單向數(shù)據(jù)流，需要手動(dòng) setState
Vue template 結(jié)構(gòu)表現(xiàn)分離，React 用 jsx 結(jié)構(gòu)表現(xiàn)融合，html/css都可以寫(xiě)到j(luò)s里
都可以通過(guò) props 進(jìn)行父子組件數(shù)據(jù)傳遞，只是 Vue props 要聲明，React 不用聲明可能直接使用
Vue 可以用插槽，React 是萬(wàn)物皆可 props
Vue2 利用基本都是 Mixin，React 可以用高階函數(shù)、自定義 hook 實(shí)現(xiàn)
Vue 的 frgments、hook 到 Vue3 才有，Vue 還有豐富的指令，過(guò)濾器

都支持服務(wù)端渲染，都有虛擬 DOM，數(shù)據(jù)驅(qū)動(dòng)，組件化開(kāi)發(fā)，響應(yīng)式，組件通信，生命周期，Diff，都有狀態(tài)管理 Vuex/Pinia、Redux/Mobx，等等等等....

白銀級(jí)

可以加一些偏感受方面的，比如：

React 官方只關(guān)注底層，上層應(yīng)用解決方案都交給社區(qū)，所以 React 生態(tài)體系豐富，社區(qū)強(qiáng)，而且每次更新改動(dòng)小等等，而 Vue 是由官方主導(dǎo)開(kāi)發(fā)和維護(hù)，生態(tài)沒(méi)那么豐富，雖然上手比 React 簡(jiǎn)單一些，但每次更新堪稱破土重來(lái)，改的倒是瀟灑得很，這就注定我們學(xué)習(xí)成本大大增加，并不能做到學(xué)習(xí)一次就可以一直使用這個(gè)框架，1.0 改版 2.0 需要重新學(xué)習(xí)一遍，2.0 改版 3.0 又要學(xué)習(xí)一遍，甚至 3.0 到 3.2 都要重學(xué)一部分，有些程序員到了 35 退休不是不想干，也是學(xué)不動(dòng)了吧。像是需要記的 API，React 就那么幾個(gè)，剩下的自己去寫(xiě)就行了，Vue 雖然在代碼維護(hù)上有一定優(yōu)勢(shì)，可是它的 API 就多得多了，而且還分版本，比如 Vue2 有過(guò)濾器，Vue3 卻沒(méi)了，不僅要多記很多 API 和自定義指令，還需要對(duì)自己所學(xué)的 API 根據(jù)版本進(jìn)行選擇使用，感覺(jué)不怎么嚴(yán)謹(jǐn)

也可以將青銅級(jí)上面的某些點(diǎn)展開(kāi)說(shuō)一下細(xì)節(jié)，比如：

組件化：

Vue2 組件說(shuō)白了就是一個(gè)掛滿一堆東西的 Vue 核心類，通過(guò) new Vue() 拿到實(shí)例。就是說(shuō) Vue 組件的 script 導(dǎo)出的是一個(gè)掛滿各種 options 的純對(duì)象而已，所以 options API 的 this 指向 Vue 實(shí)例，這對(duì)我們開(kāi)發(fā)者來(lái)說(shuō)是不透明的，需要文檔才能知道上面一堆 this.$xxx 是干嘛用的，而且 Vue 的插件也都是基于 Vue 原型類基礎(chǔ)上的，Vue.install 掛到 Vue 實(shí)例上去嘛，以保證和第三方庫(kù)的 Vue 調(diào)的是同一個(gè) Vue 對(duì)象
而 React 則比較簡(jiǎn)單，直接定義 render 函數(shù)生成 vnode，里面通過(guò)四個(gè)組件類包裝 vnode 而已，不同類型的 vnode 用相對(duì)應(yīng)的組件類處理，就像責(zé)任劃分一樣，各自只負(fù)責(zé)自己的。而且 React 類組件都是繼承于 React.Component 類，它的 this 指向我們自定義的類，可以說(shuō)對(duì)我們開(kāi)發(fā)者來(lái)說(shuō)是透明的

hook：

React hook 是根據(jù)調(diào)用順序來(lái)確定下一次重新渲染時(shí)的 state 是來(lái)源于哪個(gè)，所以有一些限制，比如不能在循環(huán)/條件判斷/嵌套函數(shù)里使用，而且必須在函數(shù)最頂層調(diào)用 hook 等
Vue3 hook 是基于響應(yīng)式實(shí)現(xiàn)的，它是聲明在 setup 里，一次組件實(shí)例化只調(diào)用一次 setup，而 React 每次重新渲染都要重新調(diào)用，性能上自然不言而喻，而且可以在循環(huán)/條件判斷/嵌套函數(shù)里使用，并且正因?yàn)槭腔陧憫?yīng)式實(shí)現(xiàn)的，還自動(dòng)實(shí)現(xiàn)了依賴收集，而 React 需要手動(dòng)傳入依賴等

等等...

黃金級(jí)

起碼得深入源碼吧，比如：

響應(yīng)式：

Vue2 響應(yīng)式的特點(diǎn)就是依賴收集，數(shù)據(jù)可變，自動(dòng)派發(fā)更新，初始化時(shí)通過(guò) Object.defineProperty 遞歸劫持 data 所有屬性添加 getter/setter，觸發(fā) getter 的時(shí)候進(jìn)行依賴收集，修改時(shí)觸發(fā) etter 自動(dòng)派發(fā)更新找到引用組件重新渲染
Vue3 響應(yīng)式使用原生 Proxy 重構(gòu)了響應(yīng)式，一是 proxy 不存在響應(yīng)式存在的缺陷，二是性能更好，不僅支持更多的數(shù)據(jù)結(jié)構(gòu)，而且不再一開(kāi)始遞歸劫持對(duì)象屬性，而是代理第一層對(duì)象本身。運(yùn)行時(shí)才遞歸，用到才代理，用 effect 副作用來(lái)代替 Vue2 里的 watcher，用一個(gè)依賴管理中心 trackMap 來(lái)統(tǒng)一管理依賴代替 Vue2 中的 Dep，這樣也不需要維護(hù)特別多的依賴關(guān)系，性能上取得很大進(jìn)步
相比 Vue 的自動(dòng)化，eact 則是基于狀態(tài)，單向數(shù)據(jù)流，數(shù)據(jù)不可變，需要手動(dòng) setState 來(lái)更新，而且當(dāng)數(shù)據(jù)改變時(shí)會(huì)以組件根為目錄，默認(rèn)全部重新渲染整個(gè)組件樹(shù)，只能額外用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等方法來(lái)進(jìn)行控制，更新粒度更大一些

Diff 算法：

Vue2 是同層比較新老 vnode，新的不存在老的存在就刪除，新的存在老的不存在就創(chuàng)建，子節(jié)點(diǎn)采用雙指針頭對(duì)尾兩端對(duì)比的方式，全量diff，然后移動(dòng)節(jié)點(diǎn)時(shí)通過(guò) splice 進(jìn)行數(shù)組操作
Vue3 是采用 Map 數(shù)據(jù)結(jié)構(gòu)以及動(dòng)靜結(jié)合的方式，在編譯階段提前標(biāo)記靜態(tài)節(jié)點(diǎn)，Diff 過(guò)程中直接跳過(guò)有靜態(tài)標(biāo)記的節(jié)點(diǎn)，并且子節(jié)點(diǎn)對(duì)比會(huì)使用一個(gè) source 數(shù)組來(lái)記錄節(jié)點(diǎn)位置及最長(zhǎng)遞增子序列算法優(yōu)化了對(duì)比流程，快速 Diff，需要處理的邊際條件會(huì)更少
React 是遞歸同層比較，標(biāo)識(shí)差異點(diǎn)保存到 Diff 隊(duì)列保存，得到 patch 樹(shù)，再統(tǒng)一操作批量更新 DOM。Diff 總共就是移動(dòng)、刪除、增加三個(gè)操作，如果結(jié)構(gòu)發(fā)生改變就直接卸載重新創(chuàng)建，如果沒(méi)有則將節(jié)點(diǎn)在新集合中的位置和老集合中的 lastIndex 進(jìn)行比較是否需要移動(dòng)，如果遍歷過(guò)程中發(fā)現(xiàn)新集合沒(méi)有，但老集合有就刪除

鉆石級(jí)

這得要脫離代碼層面，上升到更加宏觀的層面吧，區(qū)別擺在那里是死的，固定的，就主要看人怎么說(shuō)了，比如

以突出核心思想和設(shè)計(jì)理念開(kāi)頭：

我覺(jué)得最主要就是核心思想和設(shè)計(jì)理念上的區(qū)別，React 一開(kāi)始定位的就是 UI 開(kāi)發(fā)的新思路，這種思想說(shuō)白了就是要改變開(kāi)發(fā)者，我制定規(guī)則，你們都照我的來(lái)，因?yàn)楸晨看蠊?facebook)，所以不缺用戶，而 Vue 是盡可能降低前端開(kāi)發(fā)的門(mén)檻來(lái)適應(yīng)不同的開(kāi)發(fā)者，讓開(kāi)發(fā)者怎么爽怎么來(lái)，正是因?yàn)檫@種設(shè)計(jì)理念上的差別對(duì)后續(xù)設(shè)計(jì)也產(chǎn)生了一些不可逆的影響，或者說(shuō)這兩框架后續(xù)架構(gòu)的變化都是圍繞這個(gè)來(lái)的。

以突出數(shù)據(jù)管理開(kāi)頭：

我覺(jué)得這兩最主要的區(qū)別是在數(shù)據(jù)管理方式上，雖然都是數(shù)據(jù)驅(qū)動(dòng)，但 Vue 是響應(yīng)式的，React 是手 setState，可以說(shuō)正是因?yàn)檫@個(gè)對(duì)后面架構(gòu)的設(shè)計(jì)都產(chǎn)生了一些不可逆的影響，或者說(shuō)這兩框架后續(xù)架構(gòu)的變化都是圍繞這個(gè)來(lái)的。

主要體現(xiàn)在這些方面：

比如 Vue 是對(duì)數(shù)據(jù)進(jìn)行劫持/代理，它對(duì)監(jiān)測(cè)數(shù)據(jù)的變化更加精準(zhǔn)，動(dòng)了多少數(shù)據(jù)就觸發(fā)多少更新，更新粒度很小，而 React 推崇函數(shù)式，這是沒(méi)辦法感知數(shù)據(jù)變化的，就是說(shuō)不知道什么時(shí)候應(yīng)該刷新，而且即便是手動(dòng) setState 觸發(fā)更新，它也也不知道哪些組件需要刷新，而是渲染整個(gè) DOM，說(shuō)白了就是無(wú)腦刷新嘛，這樣就導(dǎo)致性能不好，所以后面只能不斷通過(guò)其他辦法來(lái)避免不必要的刷新，或者優(yōu)化無(wú)腦刷新的性能。當(dāng)然 Vue 也不是那么完美，它實(shí)現(xiàn)精準(zhǔn)刷新也是有代價(jià)的，就是需要給每個(gè)組件配置監(jiān)視器，管理依賴收集和派發(fā)更新，這同樣是有消耗的。且不是說(shuō)性能誰(shuí)好吧，我們可以對(duì)比下這兩框架版本迭代可以發(fā)現(xiàn)，React 迭代是增加了一個(gè)個(gè)避免刷新的鉤子函數(shù)或者 API 還有采用 Fiber 的架構(gòu)來(lái)做時(shí)間分片也是來(lái)優(yōu)化渲染的性能。而 Vue1/Vue2/Vue3 每個(gè)版本雖然改的東西多，但核心都是圍繞響應(yīng)式來(lái)優(yōu)化的，所以我覺(jué)得這是這兩框架之間最重要的區(qū)別

比如正是這種設(shè)計(jì)上的區(qū)別，也直接影響了 hooks 的實(shí)現(xiàn)和表現(xiàn)，React hook 底層是基于鏈表實(shí)現(xiàn)的，每次組件被 render 的時(shí)候都會(huì)按順序執(zhí)行所有 hooks，而且正因?yàn)榈讓邮擎湵?，每個(gè) hook 的 next 是指向下一個(gè) hook 的，所以我們寫(xiě)代碼是不能在不同的 hooks 調(diào)用里使用條件判斷/函數(shù)嵌套之類的，因?yàn)檫@會(huì)導(dǎo)致執(zhí)行順序不對(duì)，從而出錯(cuò)。而 Vue hook 只會(huì)被注冊(cè)調(diào)用一次，因?yàn)樗锹暶髟?setup 里，一次組件實(shí)例化只調(diào)用一次 setup，Vue 之所以能避開(kāi)這些問(wèn)題，主要還是得益于數(shù)據(jù)響應(yīng)式，不需要鏈表對(duì) hooks 進(jìn)行記錄，而是直接對(duì)數(shù)據(jù)代理觀察，但它也有困擾的地方，就是不得不返回一個(gè)包裝對(duì)象，通過(guò) .value 獲取。因?yàn)樵?JS 里基礎(chǔ)類型只有值，沒(méi)有引用，或者說(shuō)只存在棧里，使用完就回收了，無(wú)法追蹤后續(xù)變化，自然做不到數(shù)據(jù)的代理和攔截，這算是這個(gè)設(shè)計(jì)的一個(gè)缺點(diǎn)吧

再比如編譯優(yōu)化的問(wèn)題，Vue 能夠做到數(shù)據(jù)劫持，再到 Vue3 動(dòng)靜結(jié)合的 Diff 思想也得益于它的模板語(yǔ)法實(shí)現(xiàn)了靜態(tài)編譯。就是能做到預(yù)編譯優(yōu)化，可以靜態(tài)分析，在解析模板時(shí)能根據(jù)解析到的不同的標(biāo)簽、文本等分別執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)來(lái)構(gòu)造 AST，而 React 雖然 JSX 語(yǔ)法更加靈活，可也正是因?yàn)檫@樣導(dǎo)致可以優(yōu)化的地方不足，重新渲染時(shí)就是一堆遞歸調(diào)用 React.createElement，無(wú)法從模板層面進(jìn)行靜態(tài)分析，也就做不到雙向綁定，即使是很厲害的 fiber，也是因?yàn)閭σ呀?jīng)造成，所以通過(guò)時(shí)間分片的優(yōu)化來(lái)彌補(bǔ)傷害吧，因?yàn)橐呀?jīng)無(wú)法在編譯階段進(jìn)行優(yōu)化了，這也是這個(gè)設(shè)計(jì)所帶來(lái)的問(wèn)題吧

項(xiàng)目選型怎么考慮？怎么選擇？

從加載速度，運(yùn)行時(shí)性能來(lái)說(shuō)，我覺(jué)得這兩個(gè)框架綜合各種場(chǎng)景應(yīng)該是沒(méi)什么質(zhì)的差別的。硬要說(shuō)的話，Vue 在更新時(shí)性能優(yōu)化方面需要的心智負(fù)擔(dān)可能會(huì)少那么一點(diǎn)，特別是 Vue3，而 React 如果不注意，容易導(dǎo)致一些組件無(wú)用的 Diff，但其實(shí)實(shí)際項(xiàng)目中真正能遇到這種性能瓶頸的也是極少數(shù)，所以(這里有兩種說(shuō)法)：

(如果公司主要用 Vue 技術(shù)棧的話)：所以總的來(lái)說(shuō)我覺(jué)得 Vue 性能上會(huì)更有優(yōu)勢(shì)一點(diǎn)，特別是 Vue3 更加靈活，有很好的可擴(kuò)展性，同時(shí)有更快的渲染速度和更小的打包體積。從 mixins 到 HOC 到 render props 再到 hooks，React 基本已經(jīng)廢掉了過(guò)去很多基于組件的邏輯抽象模式，抹掉了 JSX 對(duì)比模板的一個(gè)優(yōu)勢(shì)，Vue3 中現(xiàn)在也都能做到，所以我會(huì)偏向 Vue3。

(如果公司主要用 React 技術(shù)棧的話)：所以總的來(lái)說(shuō)我覺(jué)得要是一些不大的系統(tǒng)或者 H5 就用 Vue，因?yàn)椴还苁巧鲜诌€是開(kāi)發(fā)難度上都很簡(jiǎn)單，開(kāi)發(fā)效率也高嘛，而且它有更小的打包體積，畢竟在移動(dòng)端網(wǎng)絡(luò)差異大的情況下，資源體積是非常重要的。但像是一些中后臺(tái)系統(tǒng)，或者一些大點(diǎn)的項(xiàng)目，會(huì)越做越大的，多人協(xié)作開(kāi)發(fā)的，就用 React，因?yàn)樗暮瘮?shù)式編程有更加靈活的結(jié)構(gòu)和可擴(kuò)展性，豐富的生態(tài)圈和工具鏈，解決方案多，后期也更方便迭代與維護(hù)，還適用原生 APP，所以我會(huì)偏向 React。

你覺(jué)得這兩框架哪個(gè)厲害

這個(gè)，我覺(jué)得吧，我們討論這個(gè)問(wèn)題的時(shí)候，可能由于咱倆關(guān)于這一塊兒的信息不對(duì)等，只是表達(dá)自己想法的話，有可能會(huì)變成兩個(gè)陣營(yíng)的，而且即使證明了一個(gè)比另一個(gè)牛比，也不意味著我的項(xiàng)目就牛比了，反正好用就都學(xué)，讓自己變得厲害才更靠譜一點(diǎn)