v-memo pour mémoriser les templates
Directive v-memo, tableau de dépendances, situations où le nouveau rendu est ignoré et comparaison avec computed
v-memo pour mémoriser les templates est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que v-memo
v-memo mémorise une section du modèle. Vue met en cache la sortie rendue et ne rend à nouveau ce sous-arbre que lorsque l'une des dépendances indiquées change. Il s'agit d'un mécanisme de dernier recours pour les performances lorsque le balisage est coûteux et principalement statique.
Le tableau des dépendances
Vous liez un tableau de dépendances. Tant que chaque valeur du tableau est égale à sa valeur précédente, Vue ignore la mise à jour de l'élément entier et de ses enfants.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Un tableau vide
Un tableau vide v-memo="[]" signifie que le contenu est rendu une fois et n'est jamais mis à jour : cela équivaut à rendre du contenu statique une seule fois.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Le principal cas d'utilisation : v-for
La principale raison d'utiliser v-memo concerne les très grandes listes. Placez-le à l'intérieur de v-for afin que chaque ligne ne soit rendue à nouveau que lorsque ses propres données pertinentes changent.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Mémoriser la ligne sélectionnée
Dans l'exemple classique, des milliers de lignes ne sont rendues à nouveau que lorsque leur état de sélection change. La comparaison item.id === selectedId signifie qu'une ligne n'est mise à jour que lorsqu'elle gagne ou perd la sélection.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Répertorier toutes les dépendances réactives
Vous devez inclure chaque valeur réactive dont dépend le sous-arbre. Si vous en oubliez une, l'élément ne sera pas mis à jour lorsque cette valeur changera : cela crée un bogue subtil d'interface obsolète.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Ne jamais combiner avec v-if
Ne placez pas v-memo sur le même élément que v-if ou les directives structurelles de v-for d'une manière conflictuelle. Plus précisément, v-memo et v-if sur le même élément ne sont pas pris en charge et produisent un comportement indéfini.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo et computed
Un computed met en cache une valeur dérivée de l'état réactif. v-memo met en cache des nœuds V rendus. Ils répondent à des problèmes différents : computed évite de recalculer les données, tandis que v-memo évite de rendre à nouveau le balisage.
Quand computed suffit
Si votre goulot d'étranglement est le recalcul des données (filtrage, tri ou mise en forme), commencez par utiliser computed : c'est plus simple et plus difficile à mal utiliser.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Quand v-memo est utile
Utilisez v-memo uniquement lorsque le profilage montre que le rendu répété d'une grande liste domine le temps d'exécution et que la plupart des lignes restent inchangées entre les mises à jour.
Mesurer d'abord
v-memo ajoute une surcharge mémoire et un coût de comparaison. Pour les petites listes, il peut être plus lent qu'un rendu simple. Mesurez toujours les performances avant et après pour confirmer un gain réel.
Vérification rapide
Quand v-memo est-il le bon outil ?
Récapitulatif
v-memo="[deps]" ignore le rendu répété d'un sous-arbre tant que toutes les dépendances listées restent inchangées : c'est idéal dans les grandes listes v-for. Répertoriez chaque dépendance réactive, ne le combinez jamais avec v-if sur le même élément, préférez computed pour les valeurs dérivées et effectuez toujours un profilage pour confirmer un véritable gain de performances.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « v-memo pour mémoriser les templates » est-elle gratuite ?
Oui — le texte complet de « v-memo pour mémoriser les templates » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « v-memo pour mémoriser les templates » ?
Directive v-memo, tableau de dépendances, situations où le nouveau rendu est ignoré et comparaison avec computed Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « v-memo pour mémoriser les templates » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- v-memo pour mémoriser les templates
- Analyser les performances avec l’onglet Performance de Vue DevTools
- Défilement virtuel des grandes listes
- Web Workers avec Vue