#yyds幹貨盤點#Vue3.2 新指令 v-memo解析

v-memo 官方定義

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

<div v-memo="[valueA, valueB]">
    ...
</div>      

當元件重新渲染，如果 ​

​valueA​

​​ 和 ​

​valueB​

​​ 都保持不變，這個 ​

​<div>​

​​ 及其子項的所有更新都将被跳過。實際上，甚至虛拟 ​

​DOM​

​​ 的 ​

​vnode​

​ 建立也将被跳過，因為緩存的子樹副本可以被重新使用。

正确指定緩存數組很重要，否則應該生效的更新可能被跳過。​

​v-memo​

​​ 傳入空依賴數組 (​

​v-memo="[]"​

​​) 将與 ​

​v-once​

​ 效果相同。

簡單了解：​

​v-memo​

​​ 接受一個依賴的​

​數組​

​​，依賴的數組變化，​

​v-memo​

​​ 所對應的 ​

​DOM​

​​ 包括子集将會​

​重新渲染​

​​，反過來說，如果依賴的​

​數組不變​

​​，即使整元件重新渲染了，​

​v-memo​

​​ 所對應的 ​

​DOM​

​​ 包括子集更新都将被​

​跳過​

​

使用場景

<template>
  <div class="home">
    <input type="text" v-model="value">
    <!-- v-memo中值若不發生變化，則不會進行更新 -->
    <ul v-memo="[shouldUpdate]">
        <li class="licss" v-for="item in arr" :key="item">
          {{ value }} -- {{ animalType[value] }}
        </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "@vue/reactivity"
import { watch } from "@vue/runtime-core"
const arr=new Array(10000)
const animalType={
  'mie':'🐏',
  'mo':'🐂',
  'miao':'🐱',
}
const value=ref('mie')
const shouldUpdate=ref(0)
// 監聽value(輸入框中的值)。
// 如果資料發生變化，并且在animalType對象中存在。試圖進行更新。否則試圖不進行更新。
watch(()=>value.value,()=>{
  if(Object.keys(animalType).includes(value.value)){
    shouldUpdate.value++
  }
})
</script>