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

青銅級(jí)

只要真正了解一些，或者用過兩個(gè)框架開發(fā)，就一定能說上來的一些語法層面：

• 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里
• 都可以通過 props 進(jìn)行父子組件數(shù)據(jù)傳遞，只是 Vue props 要聲明，React 不用聲明可能直接使用
• Vue 可以用插槽，React 是萬物皆可 props
• Vue2 利用基本都是 Mixin，React 可以用高階函數(shù)、自定義 hook 實(shí)現(xiàn)
• Vue 的 frgments、hook 到 Vue3 才有，Vue 還有豐富的指令，過濾器

都支持服務(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)沒那么豐富，雖然上手比 React 簡(jiǎn)單一些，但每次更新堪稱破土重來，改的倒是瀟灑得很，這就注定我們學(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 有過濾器，Vue3 卻沒了，不僅要多記很多 API 和自定義指令，還需要對(duì)自己所學(xué)的 API 根據(jù)版本進(jìn)行選擇使用，感覺不怎么嚴(yán)謹(jǐn)

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

組件化：

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

hook：

• React hook 是根據(jù)調(diào)用順序來確定下一次重新渲染時(shí)的 state 是來源于哪個(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í)通過 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 副作用來代替 Vue2 里的 watcher，用一個(gè)依賴管理中心 trackMap 來統(tǒng)一管理依賴代替 Vue2 中的 Dep，這樣也不需要維護(hù)特別多的依賴關(guān)系，性能上取得很大進(jìn)步
• 相比 Vue 的自動(dòng)化，eact 則是基于狀態(tài)，單向數(shù)據(jù)流，數(shù)據(jù)不可變，需要手動(dòng) setState 來更新，而且當(dāng)數(shù)據(jù)改變時(shí)會(huì)以組件根為目錄，默認(rèn)全部重新渲染整個(gè)組件樹，只能額外用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等方法來進(jìn)行控制，更新粒度更大一些

Diff 算法：

• Vue2 是同層比較新老 vnode，新的不存在老的存在就刪除，新的存在老的不存在就創(chuàng)建，子節(jié)點(diǎn)采用雙指針頭對(duì)尾兩端對(duì)比的方式，全量diff，然后移動(dòng)節(jié)點(diǎn)時(shí)通過 splice 進(jìn)行數(shù)組操作
• Vue3 是采用 Map 數(shù)據(jù)結(jié)構(gòu)以及動(dòng)靜結(jié)合的方式，在編譯階段提前標(biāo)記靜態(tài)節(jié)點(diǎn)，Diff 過程中直接跳過有靜態(tài)標(biāo)記的節(jié)點(diǎn)，并且子節(jié)點(diǎn)對(duì)比會(huì)使用一個(gè) source 數(shù)組來記錄節(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)建，如果沒有則將節(jié)點(diǎn)在新集合中的位置和老集合中的 lastIndex 進(jìn)行比較是否需要移動(dòng)，如果遍歷過程中發(fā)現(xiàn)新集合沒有，但老集合有就刪除

鉆石級(jí)

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

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

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

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

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

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

比如 Vue 是對(duì)數(shù)據(jù)進(jìn)行劫持/代理，它對(duì)監(jiān)測(cè)數(shù)據(jù)的變化更加精準(zhǔn)，動(dòng)了多少數(shù)據(jù)就觸發(fā)多少更新，更新粒度很小，而 React 推崇函數(shù)式，這是沒辦法感知數(shù)據(jù)變化的，就是說不知道什么時(shí)候應(yīng)該刷新，而且即便是手動(dòng) setState 觸發(fā)更新，它也也不知道哪些組件需要刷新，而是渲染整個(gè) DOM，說白了就是無腦刷新嘛，這樣就導(dǎo)致性能不好，所以后面只能不斷通過其他辦法來避免不必要的刷新，或者優(yōu)化無腦刷新的性能。當(dāng)然 Vue 也不是那么完美，它實(shí)現(xiàn)精準(zhǔn)刷新也是有代價(jià)的，就是需要給每個(gè)組件配置監(jiān)視器，管理依賴收集和派發(fā)更新，這同樣是有消耗的。且不是說性能誰好吧，我們可以對(duì)比下這兩框架版本迭代可以發(fā)現(xiàn)，React 迭代是增加了一個(gè)個(gè)避免刷新的鉤子函數(shù)或者 API 還有采用 Fiber 的架構(gòu)來做時(shí)間分片也是來優(yōu)化渲染的性能。而 Vue1/Vue2/Vue3 每個(gè)版本雖然改的東西多，但核心都是圍繞響應(yīng)式來優(yōu)化的，所以我覺得這是這兩框架之間最重要的區(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 之所以能避開這些問題，主要還是得益于數(shù)據(jù)響應(yīng)式，不需要鏈表對(duì) hooks 進(jìn)行記錄，而是直接對(duì)數(shù)據(jù)代理觀察，但它也有困擾的地方，就是不得不返回一個(gè)包裝對(duì)象，通過 .value 獲取。因?yàn)樵?JS 里基礎(chǔ)類型只有值，沒有引用，或者說只存在棧里，使用完就回收了，無法追蹤后續(xù)變化，自然做不到數(shù)據(jù)的代理和攔截，這算是這個(gè)設(shè)計(jì)的一個(gè)缺點(diǎn)吧

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

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

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

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

(如果公司主要用 React 技術(shù)棧的話)：所以總的來說我覺得要是一些不大的系統(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。

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

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

結(jié)語

如果本文對(duì)你有一點(diǎn)點(diǎn)幫助，點(diǎn)個(gè)贊支持一下吧，你的每一個(gè)【贊】都是我創(chuàng)作的最大動(dòng)力 ^_^

到此這篇關(guān)于一文帶你了解Vue 和 React的區(qū)別的文章就介紹到這了,更多相關(guān)Vue 和 React區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論