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

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

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

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

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

下面是 React 代碼：

Vue 代碼：

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

先來看看React：

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

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

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

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

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

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

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

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

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

再來看看 Vue 的情況：

MyFruits 組件隻渲染了一次。

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

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

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

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

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

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

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

在 React 中:

每次渲染時都會調用 hash 。

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

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

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

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

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

怎麼說？

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

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

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!