本文不是要辯論 Vue 好還是 React 好，而是要看看這兩個(gè)框架在低層次上是如何選擇的。

我知道有些開發(fā)者在選擇框架之前會(huì)傾向于看基準(zhǔn)。然而，這并不是最關(guān)鍵的方面，因?yàn)?9%的性能都來自于你寫的代碼，而不是你使用的框架。

那么，我是如何得出這個(gè)結(jié)論的呢？

這里選取了三個(gè)常見的web應(yīng)用程序問題，并檢查了Vue和React在每個(gè)場景中的響應(yīng)情況。

項(xiàng)目

這里有一個(gè)類似 TODO 的項(xiàng)目，不過這里添加的不是事項(xiàng)而是水果。

下面是 React 代碼：

Vue 代碼：

測試1：靜態(tài)模塊

在第一個(gè)測試中，我們將比較 React 和 Vue 是如何編譯靜態(tài)部分的。

先來看看React：

如上圖所示，在 JSX 中，編譯器是非常簡單的。所有的 JSX 元素都被替換成 React ??的createElement?? 函數(shù)。它將在應(yīng)用程序的每次狀態(tài)更新時(shí)重新渲染所有靜態(tài)元素。

再來看看 Vue 中是怎么做的：

可能看起來有些復(fù)雜，但這里注意一下 hoisted_1 變量和 setup 方法。正如我們所看到的，hoisted_1變量包含了我們的靜態(tài)內(nèi)容，并被定義在 setup 函數(shù)之外。

在編譯過程中，Vue檢測所有不依賴于應(yīng)用程序狀態(tài)的靜態(tài)節(jié)點(diǎn)，并將變量提升到組件設(shè)置之外，這樣它就不必在每次渲染后重新生成這些靜態(tài)節(jié)點(diǎn)。

小結(jié)

React 只將 JSX 編譯為JS，而 Vue 通過提升有效地優(yōu)化了靜態(tài)塊。這種優(yōu)化對具有許多節(jié)點(diǎn)和深層樹狀結(jié)構(gòu)的大頁面是有益的。

測試2：重新渲染

React 和 Vue 之間的顯著差異在這第二個(gè)測試中顯現(xiàn)出來。

當(dāng)我們在文本輸入中輸入 "TEST "時(shí)，React 應(yīng)用程序的控制臺(tái):

我們可以看到，MyFruits組件被渲染了五次。

• 在父組件的第一次渲染時(shí)一次
• 在輸入中每按一次鍵，就有四次（test 的個(gè)數(shù)）。

再來看看 Vue 的情況：

MyFruits 組件只渲染了一次。

默認(rèn)情況下，Vue中的任何孩子組件都是有緩存。只有當(dāng)它的 props 發(fā)生變化時(shí)，它才會(huì)被重新渲染。

React 中無論 props是否改變，都會(huì)重新渲染。

因此，Vue 中的同等代碼比 React 的性能更強(qiáng)??。

React 是怎么來解決這個(gè)問題的？

在React中，開發(fā)者可以選擇通過使用memo helper來啟用 memoization?？梢酝ㄟ^下面的代碼來完成：

然而，這需要額外的代碼來達(dá)到相同的性能。

測試 3：計(jì)算屬性

在Vue中，一個(gè)計(jì)算屬性是一個(gè)將根據(jù)其他屬性而被重新計(jì)算糶的的值。例如，一個(gè) hashed password 只有在 password 被改變時(shí)才會(huì)被重新計(jì)算。

在 React 中:

每次渲染時(shí)都會(huì)調(diào)用 hash 。

在Vue中，只有在使用 hashed 時(shí)才會(huì)重新執(zhí)行。如果該值在模板中不是必需的，就不會(huì)重新執(zhí)行。此外，Vue 隱含地檢測到了依賴關(guān)系，只有在 password  改變時(shí)才會(huì)進(jìn)行計(jì)算。

這在 React中也是可行的，也也是需要額外的代碼：

我們需要調(diào)用 useMemo 并提供一個(gè)依賴數(shù)組。此外，React 無法檢測到模板中是否使用了 hashed 變量，并會(huì)在第一次渲染時(shí)計(jì)算 hash 。

這是一個(gè)非常簡單的例子，但要考慮復(fù)雜的操作。這將極大地影響組件的渲染時(shí)間，特別是當(dāng)計(jì)算的屬性在初始渲染時(shí)沒有被使用時(shí)。

所以 Vue > React？

不，經(jīng)過上面所有的例子，你可能認(rèn)為 Vue 比 Reac t的性能更好。但這是錯(cuò)誤的。事實(shí)上，這兩個(gè)庫有不同的理念。Vue 是隱式的，而 React 是顯式的。

怎么說？

Vue 是老好人，傾向于將盡可能多的事情自動(dòng)化，因此開發(fā)者可以專注于業(yè)務(wù)邏輯。Vue 默認(rèn)提供更好的性能。

另一方面，如果我們想開發(fā)更復(fù)雜的功能，這也會(huì)導(dǎo)致缺乏一些靈活性。如果你沒有真正掌握 Vue組件的生命周期，你可能會(huì)花很多時(shí)間來調(diào)試一些愚蠢的代碼。

另外，React 比較懶，需要開發(fā)者自己動(dòng)手，不過，這樣也給我們帶來更多的靈活性。但也會(huì)多寫些代碼，像上面的三個(gè)例子一樣，才能達(dá)到與Vue相同的性能。

綜上，如果是新手，可以先從 vue 上手，比較好入手。相比之下，React 適合那些已經(jīng)有基于組件的框架工作經(jīng)驗(yàn)的開發(fā)者。