快捷導(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è)框架開發(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都可以寫到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)，組件化開發(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)開發(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è)，剩下的自己去寫就行了，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)展開說(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ì)我們開發(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ì)我們開發(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)，而且不再一開始遞歸劫持對(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è)組件樹，只能額外用 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 樹，再統(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ì)理念開頭：

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

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

我覺(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 的，所以我們寫代碼是不能在不同的 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 之所以能避開這些問(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)椴还苁巧鲜诌€是開發(fā)難度上都很簡(jiǎn)單，開發(fā)效率也高嘛，而且它有更小的打包體積，畢竟在移動(dòng)端網(wǎng)絡(luò)差異大的情況下，資源體積是非常重要的。但像是一些中后臺(tái)系統(tǒng)，或者一些大點(diǎn)的項(xiàng)目，會(huì)越做越大的，多人協(xié)作開發(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)