vue3性能為什么比vue2好？

1.diff算法優化

首先，diff算法是虛擬DOM技術的必然產物，它會對新舊虛擬DOM作對比（即diff），然后將變化的地方更新在真實DOM上。而這其中，如何快速的判別需要變化的內容，就是Vue3.0的提升。具體來看：

在Vue2.0當中，當數據發生變化，它就會新生成一個DOM樹，並和之前的DOM樹進行比較，找到不同的節點然后更新。但這比較的過程是全量的比較，也就是每個節點都會彼此比較。但其中很顯然的是，有些節點中的內容是不會發生改變的，那我們對其進行比較就肯定消耗了時間。所以在Vue3.0當中，就對這部分內容進行了優化：在創建虛擬DOM樹的時候，會根據DOM中的內容會不會發生變化，添加一個靜態標記。那么之后在與上次虛擬節點進行對比的時候，就只會對比這些帶有靜態標記的節點。

為了方便看到結果，我們將代碼轉成Vue3源碼就可看到效果：

對於這個靜態標記為什么是數字1，PatchFlags目錄中有詳細敘述：

 

export const enum PatchFlags {
  // 動態文本節點
  TEXT = 1,

  // 動態 class
  CLASS = 1 << 1, // 2

  // 動態 style
  STYLE = 1 << 2, // 4

  // 動態屬性，但不包含類名和樣式
  // 如果是組件，則可以包含類名和樣式
  PROPS = 1 << 3, // 8

  // 具有動態 key 屬性，當 key 改變時，需要進行完整的 diff 比較。
  FULL_PROPS = 1 << 4, // 16

  // 帶有監聽事件的節點
  HYDRATE_EVENTS = 1 << 5, // 32

  // 一個不會改變子節點順序的 fragment
  STABLE_FRAGMENT = 1 << 6, // 64

  // 帶有 key 屬性的 fragment 或部分子字節有 key
  KEYED_FRAGMENT = 1 << 7, // 128

  // 子節點沒有 key 的 fragment
  UNKEYED_FRAGMENT = 1 << 8, // 256

  // 一個節點只會進行非 props 比較
  NEED_PATCH = 1 << 9, // 512

  // 動態 slot
  DYNAMIC_SLOTS = 1 << 10, // 1024

  // 靜態節點
  HOISTED = -1,

  // 指示在 diff 過程應該要退出優化模式
  BAIL = -2
}

　　

2.靜態提升 hoistStatic

在Vue中無論元素是否參與更新，每次都會重新創建，然后再渲染。如下圖所示，每次都會createVNode。

 

 

 

但是在Vue3中使用了靜態提升后，對於不參與更新的元素，只會被創建一次，在渲染時直接復用即可：

 

 

 

3.事件偵聽器緩存 cacheHandlers

默認情況下onClick會被視為動態綁定，所以每次都會去追蹤它的變化，但是因為是同一個函數，所以沒必要去追蹤它的變化，想辦法將它直接緩存起來復用就會提升性能。

 

 

 

從上圖就可以看到，onClick果然會被視為動態綁定，它有靜態標記，查看剛才提到的目錄中發現，8是動態屬性。開啟cacheHandlers后，靜態標記就不存在了，那么這部分內容也就不會進行比較了。