快捷導(dǎo)航

面試官常問Vue和React區(qū)別解析

更新時(shí)間：2025年02月21日 08:47:33 作者：前端歐陽(yáng)

Vue和React都是流行的前端框架,它們有很多相似之處,如組件化和使用虛擬DOM,但是,它們?cè)谠O(shè)計(jì)理念、組件存在形式、diff優(yōu)化和中文文檔方面存在一些不同,這篇文章給大家介紹面試官常問Vue和React區(qū)別,感興趣的朋友一起看看吧

前言

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

歐陽(yáng)也在找工作，坐標(biāo)成都求內(nèi)推！

簡(jiǎn)單概述

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

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

設(shè)計(jì)理念不同
Vue的組件編譯后是一個(gè)組件對(duì)象，而React的組件就是一個(gè)函數(shù)
diff優(yōu)化
中文文檔

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

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

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

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

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

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

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

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

也正是因?yàn)橛羞@么多黑魔法，所以導(dǎo)致很多同學(xué)一年工作經(jīng)驗(yàn)用三年。他們將這些黑魔法當(dāng)作前端語(yǔ)言中的一部分，離開這些黑魔法后發(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：

<template>
  <h1>count的值是: {{ count }}</h1>
  <button @click="count++">count++</button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>

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

<script setup lang="ts">
import CountChild from "./count-child.vue";
console.log(CountChild);
</script>

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

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

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

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

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

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

正是因?yàn)樵赩ue中組件就是對(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的過程也是很耗時(shí)的。

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

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

原因很簡(jiǎn)單，因?yàn)閂ue的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)。