為什么說 Vue 比 React 更好？

大家好，我是魚皮。

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

有些開發(fā)者在選擇框架之前會傾向于看基準。然而，這并不是最關鍵的方面，因為 99% 的性能都來自于你寫的代碼，而不是你使用的框架。

那么，為什么得出這個結論的呢？

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

項目

這里有一個類似 TODO 的項目，不過這里添加的不是事項而是水果。

下面是 React 代碼：

Vue 代碼：

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

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

先來看看 React：

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

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

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

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

小結

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

測試2：重新渲染

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

當我們在文本輸入中輸入 "TEST "時，React 應用程序的控制臺:

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

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

再來看看 Vue 的情況：

MyFruits 組件只渲染了一次。

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

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

因此，Vue 中的同等代碼比 React 的性能更強??。

React 是怎么來解決這個問題的？

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

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

測試 3：計算屬性

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

在 React 中:

每次渲染時都會調用 hash 。

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

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

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

這是一個非常簡單的例子，但要考慮復雜的操作。這將極大地影響組件的渲染時間，特別是當計算的屬性在初始渲染時沒有被使用時。

所以 Vue > React？

不，經過上面所有的例子，你可能認為 Vue 比 React 的性能更好。但這是錯誤的。事實上，這兩個庫有不同的理念。Vue 是隱式的，而 React 是顯式的。

怎么說？

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

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

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

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