Techniques de mémoïsation
Évitez les calculs redondants grâce à la mémoïsation.
Techniques de mémoïsation est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 3 leçons au total.
Faire moins de travail
Les performances proviennent souvent du fait de ne pas recalculer ou effectuer de nouveau rendu pour les éléments qui n’ont pas changé. Vue vous fournit plusieurs outils de mémorisation qui mettent les résultats en cache et évitent les mises à jour inutiles.
Mise en cache des propriétés calculées
Une propriété calculée met son résultat en cache et ne le recalcule que lorsque l’une de ses dépendances réactives change. Elle est ainsi bien moins coûteuse qu’une méthode exécutée à chaque rendu.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Propriété calculée ou méthode
Une méthode s’exécute chaque fois que le modèle effectue un nouveau rendu, même si ses entrées sont identiques. Une propriété calculée réutilise sa valeur mise en cache : privilégiez donc les propriétés calculées pour les données dérivées utilisées dans les modèles.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once pour le contenu statique
La directive v-once effectue le rendu d’un élément une seule fois, puis l’ignore lors de toutes les mises à jour ultérieures. Utilisez-la pour le contenu qui ne change jamais.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Quand utiliser v-once
Appliquez v-once aux grandes sections statiques, comme un pied de page, un texte de conditions d’utilisation ou un en-tête fixe. Vue considère la sortie rendue comme statique et ne la compare plus jamais.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo pour les listes coûteuses
La directive v-memo mémorise un sous-arbre et n’effectue à nouveau son rendu que lorsque les valeurs de son tableau de dépendances changent. Elle est particulièrement utile pour les grandes listes.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Fonctionnement de v-memo
Chaque élément n’effectue un nouveau rendu que lorsque son tableau de mémorisation change. Si item.selected reste identique, Vue ignore entièrement le nouveau rendu de cette ligne, même si le parent est mis à jour.
Éviter les nouveaux rendus inutiles
Les composants effectuent un nouveau rendu lorsque leurs données réactives ou leurs propriétés changent. Gardez les composants petits et ciblés afin qu’une modification dans une zone ne force pas les parties sans rapport à effectuer un nouveau rendu.
Clés stables dans les listes
Attribuez toujours à v-for une :key stable et unique. Utiliser l’index du tableau comme clé peut amener Vue à réutiliser les mauvais nœuds du DOM et à effectuer plus de nouveaux rendus que nécessaire.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Réduire les données réactives au minimum
Placez des données dans l’état réactif uniquement si le modèle en dépend. Les objets volumineux ou les valeurs qui ne changent jamais dans l’interface ajoutent une surcharge au suivi de la réactivité. Utilisez lorsque c’est approprié de simples variables non réactives.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Mémoriser les fonctions pures
Pour les calculs purs en JavaScript effectués en dehors de la réactivité de Vue, vous pouvez mettre les résultats en cache dans une simple table associative afin que les appels répétés avec la même entrée renvoient instantanément leur résultat.
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}Vérification rapide
Testez vos connaissances sur la mémorisation.
Récapitulatif
Réduisez le travail inutile grâce à la mise en cache : les propriétés calculées mémorisent les valeurs dérivées, v-once effectue le rendu du contenu statique une seule fois et v-memo évite les nouveaux rendus des sous-arbres dans les grandes listes. Utilisez des clés stables et réduisez l’état réactif au minimum. Vous allez maintenant apprendre à trouver et corriger les goulots d’étranglement des performances avec des outils réels.
Questions Fréquemment Posées
La leçon « Techniques de mémoïsation » est-elle gratuite ?
Oui — le texte complet de « Techniques de mémoïsation » 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 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Techniques de mémoïsation » ?
Évitez les calculs redondants grâce à la mémoïsation. 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 2 sur 3.
Combien de temps prend la leçon « Techniques de mémoïsation » ?
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
- Chargement différé et division du code
- Techniques de mémoïsation
- Identifier et corriger les goulots d’étranglement