如何掌握Vue 3.2新指令v-memo高效使用技巧？

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

目录：+ v-memo的讲解 + 场景描述 + v-memo的使用 + 总结 + v-memo的讲解：vue3.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条数据。

前端需要做筛选。

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

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