Vue3 v-memo 指令
Vue3 内置指令v-memo 指令用于记忆化（memoize）模板的子树，通过指定依赖值数组来决定是否跳过更新。
仅在 Vue 3.2+ 版本可用。
基本说明
v-memo 指令允许你记忆化模板的一部分。它期望一个固定长度的依赖值数组。如果数组中的每个值与上次渲染时相同，则整个子树的更新将被跳过。
- 期望类型: any[]
- 作用: 记忆化模板子树，通过指定依赖值数组来决定是否跳过更新。
基本语法
实例
<!-- 当 valueA 和 valueB 都保持不变时，跳过更新 -->
<div v-memo="[valueA, valueB]">
<!-- 内容 -->
</div>
<!-- 空数组等同于 v-once -->
<div v-memo="[]">
永远不更新
</div>
<div v-memo="[valueA, valueB]">
<!-- 内容 -->
</div>
<!-- 空数组等同于 v-once -->
<div v-memo="[]">
永远不更新
</div>
使用场景
1、长列表优化
v-memo 在处理大型列表时特别有用，可以跳过不需要更新的列表项：
实例
<template>
<div class="list">
<div
v-for="item in items"
:key="item.id"
v-memo="[item.isSelected, item.isExpanded]"
class="item"
>
<div class="header">{{ item.title }}</div>
<div v-if="item.isExpanded" class="content">
{{ item.description }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, title: '标题1', description: '描述1', isSelected: true, isExpanded: false },
{ id: 2, title: '标题2', description: '描述2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
<div class="list">
<div
v-for="item in items"
:key="item.id"
v-memo="[item.isSelected, item.isExpanded]"
class="item"
>
<div class="header">{{ item.title }}</div>
<div v-if="item.isExpanded" class="content">
{{ item.description }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, title: '标题1', description: '描述1', isSelected: true, isExpanded: false },
{ id: 2, title: '标题2', description: '描述2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
v-memo 与 v-once 的区别
| 指令 | 作用 | 适用场景 |
|---|---|---|
| v-once | 永远不更新 | 内容完全静态，不需要任何更新 |
| v-memo | 依赖不变时不更新 | 内容在特定依赖变化时才需要更新 |