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

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

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

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

青銅級

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

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

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

白銀級

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

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

也可以將青銅級上面的某些點展開說一下細節(jié)，比如：

組件化：

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

hook：

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

等等...

黃金級

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

響應式：

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

Diff 算法：

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

鉆石級

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

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

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

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

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

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

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

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

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

項目選型怎么考慮？怎么選擇？

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

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

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