面試官最想聽(tīng)到的Vue和React區(qū)別

來(lái)源：湖北國(guó)菱計(jì)算機(jī)科技有限公司-湖北國(guó)聯(lián)計(jì)算機(jī)科技有限公司-荊州網(wǎng)站建設(shè)-荊州軟件開(kāi)發(fā)-政府網(wǎng)站建設(shè)公司 時(shí)間：2025-06-23

最近找工作面試時(shí)總是被問(wèn)到兩個(gè)問(wèn)題：Vue和React的區(qū)別和從編譯原理的角度來(lái)聊聊Vue的template和React的jsx。面試官問(wèn)這些問(wèn)題一般是想了解你對(duì)這兩個(gè)框架的理解，所以這是一個(gè)開(kāi)放性的問(wèn)題，不同的同學(xué)對(duì)框架的理解程度不同、側(cè)重點(diǎn)不同，回答出來(lái)的答案也不同。這篇文章歐陽(yáng)將從Vue出發(fā)來(lái)聊聊Vue和React的區(qū)別，大家有補(bǔ)充的歡迎在評(píng)論區(qū)提出。

簡(jiǎn)單概述

先來(lái)說(shuō)說(shuō)相同點(diǎn)，這個(gè)簡(jiǎn)單，組件化、采用虛擬DOM、以及都在向函數(shù)式編程靠攏，具體的表現(xiàn)就是Vue推出了Composition（組合式） API，React推出了hooks。

相同點(diǎn)都是一些老生常談的話題了，我們這篇文章主要來(lái)聊聊不同點(diǎn)。關(guān)于不同歐陽(yáng)列出了下面幾點(diǎn)：

設(shè)計(jì)理念不同

Vue的組件編譯后是一個(gè)組件對(duì)象，而React的組件就是一個(gè)函數(shù)

diff優(yōu)化

中文文檔

設(shè)計(jì)理念

我們先來(lái)看一張React官網(wǎng)的截圖：

從這張圖中我們可以提取出兩個(gè)主要信息：React組件就是函數(shù)、編寫組件的語(yǔ)法是JSX，本質(zhì)就是Javascript

我們平時(shí)寫React實(shí)際就是在寫JS，這也就是為什么React那么靈活的原因。靈活帶來(lái)的優(yōu)勢(shì)就是上限高，劣勢(shì)就是上手難度相對(duì)Vue較難。

所以在React社區(qū)中有高階組件、compose函數(shù)、純函數(shù)等概念，但是這些概念在Vue社區(qū)中很少提及。

而Vue從出生開(kāi)始就一直在盡可能的降低前端開(kāi)發(fā)門檻，通過(guò)什么方式降低呢？

Vue內(nèi)置了很多黑魔法，比如SFC、宏函數(shù)、指令、scoped等，其中最大的黑魔法就是單文件組件SFC。只要我們按照Vue的設(shè)計(jì)規(guī)范來(lái)，就能輕松的寫出漂亮的代碼。

同時(shí)Vue的設(shè)計(jì)也不會(huì)讓人反感，因?yàn)閷W(xué)習(xí)他的這一套東西真的很容易，這也就是為什么很多后端同學(xué)寫前端都是從Vue開(kāi)始。

也正是因?yàn)橛羞@么多黑魔法，所以導(dǎo)致很多同學(xué)一年工作經(jīng)驗(yàn)用三年。他們將這些黑魔法當(dāng)作前端語(yǔ)言中的一部分，離開(kāi)這些黑魔法后發(fā)現(xiàn)自己什么都不懂。

組件存在的形式

從前面的官網(wǎng)截圖可以看到React中定義一個(gè)組件就是在定義一個(gè)函數(shù)，一個(gè)文件里面可以定義多個(gè)函數(shù)，所以理所應(yīng)當(dāng)?shù)脑谝粋€(gè)文件中可以定義多個(gè)組件。

但是在Vue中事情就不一樣了。

大家都知道在Vue中一個(gè).vue文件就是一個(gè)Vue組件，所以想正常的在一個(gè).vue文件中定義多個(gè)Vue組件是不可能的。

大家知道一個(gè)Vue組件到底是什么樣的嗎？比如這個(gè)子組件count-child.vue：

很簡(jiǎn)單！我們直接在父組件里面把他打印出來(lái)就知道這個(gè)組件到底是什么玩意了，父組件代碼如下：

我們來(lái)控制臺(tái)上面看看打印出來(lái)的CountChild長(zhǎng)什么樣，如下圖：

從上圖中可以看到import導(dǎo)入進(jìn)來(lái)的CountChild變量是一個(gè)對(duì)象，并且對(duì)象上面還有一些屬性的方法：render、setup。

在父組件里面import CountChild from "./count-child.vue"，這是使用了import語(yǔ)法，講道理子組件里面應(yīng)該是有export的，但是在子組件里面沒(méi)有看到任何export的代碼。

其實(shí)這些都是vue-loader或者@vitejs/plugin-vue做的工作，底層還是調(diào)用Vue暴露出來(lái)的編譯API。

經(jīng)過(guò)他們的處理一個(gè).vue文件就變成了一個(gè)組件對(duì)象。

所以在Vue中組件其實(shí)就是對(duì)象，只是這個(gè)對(duì)象中擁有render、setup等方法。其實(shí)我們可以自己手寫一個(gè)對(duì)象，按照Vue他的規(guī)則去定義對(duì)象里面的render、setup等方法同樣可以定義一個(gè)Vue組件。

正是因?yàn)樵?/span>Vue中組件就是對(duì)象，所以在Vue社區(qū)中才很少出現(xiàn)高階組件、compose函數(shù)、純函數(shù)等概念。因?yàn)檫@些東西都是依賴于函數(shù)去實(shí)現(xiàn)的，而React中組件就是函數(shù)。

diff優(yōu)化

眾所周知每重新渲染一次都會(huì)執(zhí)行一次diff算法，如果參與diff的DOM足夠復(fù)雜，那么這個(gè)diff的過(guò)程也是很耗時(shí)的。

在優(yōu)化diff上面Vue和React走向了兩個(gè)極端，Vue走向了更加細(xì)粒度的更新，也就是大名鼎鼎的靶向更新，如果你不知道可以看一下我的這篇 靶向更新 文章。而React則是引入了fiber，采用時(shí)間切片的方式進(jìn)行優(yōu)化。

那么為什么React中沒(méi)有實(shí)現(xiàn)靶向更新呢？

原因很簡(jiǎn)單，因?yàn)?/span>Vue的template模版很不靈活，也正是因?yàn)椴混`活所以可以在編譯時(shí)就對(duì)代碼進(jìn)行分析出哪些節(jié)點(diǎn)是動(dòng)態(tài)的。相反在React中的JSX是相當(dāng)靈活，想對(duì)他進(jìn)行靜態(tài)分析很難實(shí)現(xiàn)。

中文文檔

尤大和大部分Vue團(tuán)隊(duì)成員都是國(guó)人，所以每當(dāng)英文文檔更新后，對(duì)應(yīng)的中文文檔就會(huì)很快的更新。這對(duì)于英文不好的同學(xué)是特別友好的，React雖然也有中文文檔，但是相比英文文檔來(lái)說(shuō)還是有一些滯后。

（轉(zhuǎn)載自：前端大全）