新指令 v-memo,提高性能的又一利器

語言: CN / TW / HK

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 函數的執行。

總結

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