Vue3 為我們提供了幾項開箱即用的重大性能改進，但也引入了一些額外的手動功能，可以幫助提高我們的應用性能。

在這節課中，我們介紹一下，在 Vue 3.2 中引入新指令 v-memo。引入這個指令的目的是幫助我們提高中型/大型 Vue 應用程序的性能，小項目大家根據需要自行決定。

v-memo 是做什么的？

官網對 v-memo 定義是這樣的：

緩存一個模板的子樹。在元素和組件上都可以使用。為了實現緩存，該指令需要傳入一個固定長度的依賴值數組進行比較。如果數組里的每個值都與最后一次的渲染相同，那么整個子樹的更新將被跳過。舉例來說：

看起來有點繞，但實際上，很好理解。v-memo? 所做的與我們現有的計算屬性一樣，只不過 v-memo 的對象是 DOM。

這個新指令將緩存它所控制的DOM部分，如果一個特定的值發生變化，只需運行更新并重新渲染。這些值是由我們自己手動設置。

事例

<template>
  <div>
    ..the rest of the component
    <div v-memo="[myValue]">
      <svg >
        <title>{{MyValue}}</title>
        ...
      </svg>
      <vue-custom-element :value="myValue"></vue-custom-element>
    </div>
  </div>
</template>

對上面解釋一下：v-memo 通常是作為組件的一部分來使用的，它只是影響組件 dom 的一個子集。

<div v-memo="[myValue]">

接著，我們將 v-memo?分配給了一個特定的 DIV? 和它的所有子元素。當調用 v-memo 時，需要傳遞一個值數組，以控制子樹的渲染。

數組接受一個或多個值 v-memo="[valueOne, valueTwo]"?，也接受像 v-memo="myValue === true"這樣的表達。

另外：用一個空數組調用 v-memo?相當于使用v-once，只會渲染該部分組件一次。

<svg >
  <title>{{MyValue}}</title>
  ...
</svg>
<vue-custom-element :value="myValue"></vue-custom-element>

同在看下子樹的內容。在我們的例子中，使用了一個 svg 元素和一個自定義 Vue 組件 vue-custom-element?。這樣做是為了說明一件事：v-memo 包含任何元素。

錯誤的使用方式

<div v-memo="[myValue]">
  <p>Static content, no vue values here</p>
</div>

在上面的例子中，包含在 v-memo 中的子樹不需要被緩存，因為它是靜態的，不會改變（它不包括任何Vue變量）。Vue3 會對靜態進行一個提升，以便提高性能。

在一個靜態的HTML上添加 v-memo 是沒啥作用，不管這個HTML有多復雜。

管理更新

在有些情況下，v-memo不僅可以用來提高性能，還可以通過控制組件的更新周期，實際改善UX（用戶體驗）。

<div v-memo="[allFieldChanged]">
  <p>{{ field1 }}</p>
  <p>{{ field2 }}</p>
  <p>{{ field3 }}</p>
  <p>{{ field4 }}</p>
</div>

在上面的例子中，改變一個單獨的字段，例如 field1，并不會導致重新渲染。新的字段將在所有字段都被更新后顯示。

最近遇到一個情況，一個子組件會對一個大的JSON數據集進行更新和響應。在這種情況下，使用 v-memo 真的很有幫助，當所有的變化都完成后，就可以觸發更新。

與 v-for 結合使用

使用 v-memo? 的一個最常見的用例是在處理使用 v-for 渲染的非常大的列表時。

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

如果不在上面的代碼中使用 v-memo，selected? 變量的每一次改變都會導致列表的完全重新渲染。新指令提供的緩存，允許只更新表達式 item.id === selected 發生變化的行，也就是當某個項被選中或者取消時。

如果我們考慮一個有 1000 條數據的列表。使用上述代碼的 v-memo，可以為每一個變化節省998個條重新渲染。

無意中停止了子組件觸發的更新

我們知道 v-memo 會停止子樹渲染更新，但需要注意的是，使用這個指令實際上會停止任何可能被更新觸發的代碼的執行，如 watch 函數等。

<div v-memo="[points > 1000]">
  <myComponent :points="points" />
</div>

//myComponent
<isLevel1 v-if="points <= 1000">....</isLevel1>
<isLevel2 v-if="points > 1000">...</isLevel2>
<script>
...,
watch: {
  points() {
    logPointChange();
  }
}

在上面的代碼中，如果我們的 points? 值是 1000 以內變化，那么 watch? 函數不會被執行，直到 points 的值大于 1000 才會觸發 watch 函數的執行。

總結

這個新的指令對于要求性能極高的項目有很在幫助了，一般是在比較大型的項目中使用的，當然小型項目，大家可以根據項目需要進行食用。