使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解

更新時(shí)間：2022年09月19日 09:32:23 作者：王大冶

這篇文章主要為大家介紹了使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

Vue3 為我們提供了幾項(xiàng)開(kāi)箱即用的重大性能改進(jìn)，但也引入了一些額外的手動(dòng)功能，可以幫助提高我們的應(yīng)用性能。

在這節(jié)課中，我們介紹一下，在 Vue 3.2 中引入新指令 v-memo。引入這個(gè)指令的目的是幫助我們提高中型/大型 Vue 應(yīng)用程序的性能，小項(xiàng)目大家根據(jù)需要自行決定。

v-memo 是做什么的？

官網(wǎng)對(duì) v-memo 定義是這樣的：

緩存一個(gè)模板的子樹(shù)。在元素和組件上都可以使用。為了實(shí)現(xiàn)緩存，該指令需要傳入一個(gè)固定長(zhǎng)度的依賴值數(shù)組進(jìn)行比較。如果數(shù)組里的每個(gè)值都與最后一次的渲染相同，那么整個(gè)子樹(shù)的更新將被跳過(guò)。舉例來(lái)說(shuō)：

看起來(lái)有點(diǎn)繞，但實(shí)際上，很好理解。v-memo 所做的與我們現(xiàn)有的計(jì)算屬性一樣，只不過(guò) v-memo 的對(duì)象是 DOM。

這個(gè)新指令將緩存它所控制的DOM部分，如果一個(gè)特定的值發(fā)生變化，只需運(yùn)行更新并重新渲染。這些值是由我們自己手動(dòng)設(shè)置。

事例

<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>

對(duì)上面解釋一下： v-memo 通常是作為組件的一部分來(lái)使用的，它只是影響組件 dom 的一個(gè)子集。

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

接著，我們將 v-memo分配給了一個(gè)特定的 DIV 和它的所有子元素。當(dāng)調(diào)用 v-memo 時(shí)，需要傳遞一個(gè)值數(shù)組，以控制子樹(shù)的渲染。

數(shù)組接受一個(gè)或多個(gè)值 v-memo="[valueOne, valueTwo]"，也接受像 v-memo="myValue === true"這樣的表達(dá)。

另外：用一個(gè)空數(shù)組調(diào)用 v-memo相當(dāng)于使用v-once，只會(huì)渲染該部分組件一次。

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

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

錯(cuò)誤的使用方式

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

在上面的例子中，包含在 v-memo 中的子樹(shù)不需要被緩存，因?yàn)樗庆o態(tài)的，不會(huì)改變（它不包括任何Vue變量）。Vue3 會(huì)對(duì)靜態(tài)進(jìn)行一個(gè)提升，以便提高性能。

在一個(gè)靜態(tài)的HTML上添加 v-memo 是沒(méi)啥作用，不管這個(gè)HTML有多復(fù)雜。

管理更新

在有些情況下，v-memo不僅可以用來(lái)提高性能，還可以通過(guò)控制組件的更新周期，實(shí)際改善UX（用戶體驗(yàn)）。

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

在上面的例子中，改變一個(gè)單獨(dú)的字段，例如 field1，并不會(huì)導(dǎo)致重新渲染。新的字段將在所有字段都被更新后顯示。

最近遇到一個(gè)情況，一個(gè)子組件會(huì)對(duì)一個(gè)大的JSON數(shù)據(jù)集進(jìn)行更新和響應(yīng)。在這種情況下，使用 v-memo 真的很有幫助，當(dāng)所有的變化都完成后，就可以觸發(fā)更新。

與 v-for 結(jié)合使用

使用 v-memo 的一個(gè)最常見(jiàn)的用例是在處理使用 v-for 渲染的非常大的列表時(shí)。

<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 變量的每一次改變都會(huì)導(dǎo)致列表的完全重新渲染。新指令提供的緩存，允許只更新表達(dá)式 item.id === selected 發(fā)生變化的行，也就是當(dāng)某個(gè)項(xiàng)被選中或者取消時(shí)。

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

無(wú)意中停止了子組件觸發(fā)的更新

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

<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 以內(nèi)變化，那么 watch 函數(shù)不會(huì)被執(zhí)行，直到 points 的值大于 1000 才會(huì)觸發(fā) watch 函數(shù)的執(zhí)行。