為什么說(shuō) Vue 比 React 更好？

大家好，我是魚(yú)皮。

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

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

那么，為什么得出這個(gè)結(jié)論的呢？

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

項(xiàng)目

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

下面是 React 代碼：

Vue 代碼：

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

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

先來(lái)看看 React：

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

再來(lái)看看 Vue 中是怎么做的：

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

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

小結(jié)

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

測(cè)試2：重新渲染

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

當(dāng)我們?cè)谖谋据斎胫休斎?"TEST "時(shí)，React 應(yīng)用程序的控制臺(tái):

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

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

再來(lái)看看 Vue 的情況：

MyFruits 組件只渲染了一次。

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

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

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

React 是怎么來(lái)解決這個(gè)問(wèn)題的？

在 React 中，開(kāi)發(fā)者可以選擇通過(guò)使用memo helper來(lái)啟用 memoization。可以通過(guò)下面的代碼來(lái)完成：

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

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

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

在 React 中:

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

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

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

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

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

所以 Vue > React？

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

怎么說(shuō)？

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

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

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

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