#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​​​ 包括子集更新都将被​​跳过​​

另外，依赖的数组接受一个或多个值 ​​v-memo="[valueOne, valueTwo]"​​，也接受像 ​​v-memo="myValue === true"​​这样的表达式。

如果用一个​​空数组​​调用 ​​v-memo​​ 相当于使用 ​​v-once​​，只会​​渲染​​该部分组件​​一次​​。

使用场景

假设后端返回来了 10000 条数据， 前端需要做筛选， 选出符合条件的数据进行展示， 如果没有符合条件的，则保持上次的搜索结果。

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

标签：yyds,animalType,缓存,const,memo,value,Vue3.2,数组	

From： https://blog.51cto.com/u_11365839/5806604