Directiva v-memo de Vue3
Directivas integradas de Vue3v-memoLa directiva se utiliza para memorizar (memoize) el subárbol de la plantilla, determinando si se omite la actualización mediante un array de valores de dependencia.
Disponible solo en Vue 3.2+.
Descripción básica
v-memoLa directiva te permite memorizar parte de una plantilla. Espera un array de valores de dependencia de longitud fija. Si cada valor del array es igual al del renderizado anterior, se omitirá la actualización de todo el subárbol.
- Tipo esperado: any[]
- Función: Memoriza el subárbol de la plantilla, determinando si se omite la actualización mediante un array de valores de dependencia.
Sintaxis básica
Ejemplo
<!-- Cuando valueA y valueB permanecen sin cambios, se omite la actualización -->
<div v-memo="[valueA, valueB]">
<!-- Contenido -->
</div>
<!-- Un array vacío equivale a v-once -->
<div v-memo="[]">
Nunca se actualiza
</div>
<div v-memo="[valueA, valueB]">
<!-- Contenido -->
</div>
<!-- Un array vacío equivale a v-once -->
<div v-memo="[]">
Nunca se actualiza
</div>
Casos de uso
1. Optimización de listas largas
v-memo es especialmente útil al manejar listas grandes, ya que puede omitir los elementos de la lista que no necesitan actualizarse:
Ejemplo
<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: 'Título 1', description: 'Descripción 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Título 2', description: 'Descripción 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: 'Título 1', description: 'Descripción 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Título 2', description: 'Descripción 2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
Diferencia entre v-memo y v-once
| Directiva | Función | Escenarios aplicables |
|---|---|---|
| v-once | Nunca se actualiza | El contenido es completamente estático, no necesita ninguna actualización |
| v-memo | No se actualiza cuando las dependencias no cambian | El contenido solo necesita actualizarse cuando cambian dependencias específicas |
Otras extensiones