Directive v-memo de Vue3
Vue3 Directives intégréesv-memoLa directive est utilisée pour mémoriser le sous-arbre d'un template et décider s'il faut ignorer les mises à jour en spécifiant un tableau de valeurs de dépendance.
Uniquement dans Vue 3.2+.
Description de base
v-memoLa directive vous permet de mémoriser une partie d'un template. Elle attend un tableau de valeurs de dépendance de longueur fixe. Si chaque valeur du tableau est identique à celle du dernier rendu, la mise à jour de tout le sous-arbre sera ignorée.
- Type attendu: any[]
- Effet: Mémoriser le sous-arbre du template et décider s'il faut ignorer les mises à jour en spécifiant un tableau de valeurs de dépendance.
Syntaxe de base
Exemple
<!-- Lorsque valueA et valueB restent tous deux inchangés, ignorer la mise à jour -->
<div v-memo="[valueA, valueB]">
<!-- Contenu -->
</div>
<!-- Un tableau vide est équivalent à v-once -->
<div v-memo="[]">
Ne jamais mettre à jour
</div>
<div v-memo="[valueA, valueB]">
<!-- Contenu -->
</div>
<!-- Un tableau vide est équivalent à v-once -->
<div v-memo="[]">
Ne jamais mettre à jour
</div>
Cas d'utilisation
1. Optimisation des listes longues
v-memo est particulièrement utile lors du traitement de listes volumineuses, vous permettant d'ignorer les éléments de liste qui n'ont pas besoin d'être mis à jour :
Exemple
<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: 'Titre 1', description: 'Description 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Titre 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: 'Titre 1', description: 'Description 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Titre 2', description: 'Description 2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
Différence entre v-memo et v-once
| Directive | Effet | Scénario applicable |
|---|---|---|
| v-once | Ne jamais mettre à jour | Le contenu est complètement statique, aucune mise à jour nécessaire |
| v-memo | Aucune mise à jour lorsque les dépendances restent inchangées | Le contenu ne doit être mis à jour que lorsque des dépendances spécifiques changent |
Autres extensions