如何使用Vue 3.2的v-memo指令优化性能和提升渲染效率？

本文共计439个文字，预计阅读时间需要2分钟。

目录：- v-memo 的讲解- 场景描述- v-memo 的使用- 总结- v-memo 的讲解：Vue 3.2 中新增了一个性能优化的指令；这个指令就是 v-memo；v-memo 可以做性能优化，v-memo 中值若不发生变更，整个子树更新会被跳过。

目录

• v-memo的讲解
• 场景描述
• v-memo的使用
• 总结

v-memo的讲解

vue3.2中新增了一个性能优化的指令；
这个指令就是v-memo;
v-memo:可以做性能优化，v-memo中值若不发生变化，整个子树的更新会被跳过。
<div v-memo="[valueA, valueB]">
...
</div>
当组件重新渲染的时候，如果 valueA 与 valueB 都维持不变。
那么对这个 <div> 以及它的所有子节点的更新都将被跳过。
事实上，即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
这样一来，性能将会显著提升。

场景描述

假设后端返回来了10000条数据。

前端需要做筛选。

选出符合条件的数据进行展示。

如果没有符合条件的。则保持上次的搜索结果。

v-memo的使用

<template> <div class="home"> <input type="text" v-model="jiaoSheng"> <!-- v-memo中值若不发生变化，则不会进行更新 --> <ul v-memo="[shouldUpdate]"> <li class="licss" v-for="item in arr" :key="item"> {{ jiaoSheng }} -- {{ animalType[jiaoSheng] }} </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':'