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

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

那么，我是如何得出這個結論的呢？

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

項目

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

下面是 React 代碼：

Vue 代碼：

測試1：靜態模塊

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

先來看看React：

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

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

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

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

小結

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

測試2：重新渲染

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

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

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

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

再來看看 Vue 的情況：

MyFruits 組件只渲染了一次。

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

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

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

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

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

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

測試 3：計算屬性

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

在 React 中:

每次渲染時都會調用 hash 。

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

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

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

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

所以 Vue > React？

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

怎么說？

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

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

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

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