Директива v-memo в Vue3
Встроенные директивы Vue3v-memoДиректива используется для мемоизации поддерева шаблона и определения, пропускать ли обновления, путём указания массива значений зависимостей.
Доступно только в 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: 'Title 1', description: 'Description 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Title 2', description: '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: 'Title 1', description: 'Description 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Title 2', description: 'Description 2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
Разница между v-memo и v-once
| Директива | Эффект | Применимый сценарий |
|---|---|---|
| v-once | Никогда не обновлять | Содержимое полностью статично, обновления не требуются |
| v-memo | Обновление не выполняется, когда зависимости остаются неизменными | Содержимое требует обновления только при изменении определённых зависимостей |
Другие расширения