前言

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

歐陽也在找工作，坐標成都求內(nèi)推！

簡單概述

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

相同點都是一些老生常談的話題了，我們這篇文章主要來聊聊不同點。關于不同歐陽列出了下面幾點：

• 設計理念不同

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

• diff優(yōu)化

• 中文文檔

設計理念

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

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

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

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

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

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

同時Vue的設計也不會讓人反感，因為學習他的這一套東西真的很容易，這也就是為什么很多后端同學寫前端都是從Vue開始。

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

組件存在的形式

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

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

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

大家知道一個Vue組件到底是什么樣的嗎？比如這個子組件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>

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

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

我們來控制臺上面看看打印出來的CountChild長什么樣，如下圖：

從上圖中可以看到import導入進來的CountChild變量是一個對象，并且對象上面還有一些屬性的方法：render、setup。

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

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

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

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

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

diff優(yōu)化

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

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

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

原因很簡單，因為Vue的template模版很不靈活，也正是因為不靈活所以可以在編譯時就對代碼進行分析出哪些節(jié)點是動態(tài)的。相反在React中的JSX是相當靈活，想對他進行靜態(tài)分析很難實現(xiàn)。

中文文檔

尤大和大部分Vue團隊成員都是國人，所以每當英文文檔更新后，對應的中文文檔就會很快的更新。這對于英文不好的同學是特別友好的，React雖然也有中文文檔，但是相比英文文檔來說還是有一些滯后。

總結(jié)

這篇文章我們分別從設計理念、組件存在形式、diff優(yōu)化、中文文檔方面聊了一下Vue和React的區(qū)別，歡迎大家在評論區(qū)進行補充。

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

最新評論