0Pricing
Vue Academy · Leçon

onUnmounted et stratégies de nettoyage

Suppression des intervalles, retrait des écouteurs d’événements, annulation des requêtes dans onUnmounted.

onUnmounted et stratégies de nettoyage est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Nettoyer ce que vous avez créé

Lorsqu’un composant est supprimé, tout ce qu’il a démarré — minuteurs, écouteurs, abonnements, requêtes réseau — continue de fonctionner si vous ne l’arrêtez pas. La fonction onUnmounted est l’endroit où effectuer le nettoyage afin d’éviter les fuites de mémoire et les erreurs.

La fonction onUnmounted

onUnmounted s’exécute après la suppression du composant du DOM. C’est la dernière occasion de libérer les ressources.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Schéma : effacer les intervalles

Si vous démarrez un intervalle dans onMounted, arrêtez-le dans onUnmounted. Sinon, la fonction de rappel continue de s’exécuter après la disparition du composant et provoque souvent une erreur en tentant d’accéder à un état inexistant.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Schéma : supprimer les écouteurs d’événements

Les écouteurs globaux sur window ou document persistent après la suppression du composant. Associez toujours addEventListener à removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Schéma : annuler les requêtes de données

Une requête en attente qui se termine après le démontage peut modifier l’état d’un composant qui n’existe plus. Utilisez AbortController pour l’annuler pendant le nettoyage.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Schéma : se désabonner

Les abonnements aux magasins d’état, aux sockets ou aux bus d’événements doivent être arrêtés. Enregistrez la fonction de désabonnement et appelez-la dans onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

La surveillance renvoie une fonction d’arrêt

L’appel de watch renvoie une fonction qui l’arrête. Les surveillances créées pendant la configuration s’arrêtent automatiquement, mais celles créées plus tard (par exemple dans une autre fonction de rappel) doivent être arrêtées manuellement.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

Fonction de nettoyage de watchEffect

Dans watchEffect, vous recevez une fonction onCleanup qui effectue le nettoyage avant l’exécution suivante ou lors de l’arrêt. Les ressources propres à chaque exécution restent ainsi bien gérées.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Pourquoi le nettoyage est important

Négliger le nettoyage entraîne des fuites de mémoire (ressources jamais libérées), des écouteurs en double (plusieurs montages qui s’empilent) et des erreurs (fonctions de rappel qui accèdent à un état détruit). Un code propre arrête toujours ce qu’il a démarré.

Les fonctions composables automatisent le nettoyage

Les fonctions composables bien écrites enregistrent leur propre nettoyage dans onUnmounted. C’est pourquoi les fonctions composables de VueUse, comme useEventListener, suppriment l’écouteur pour vous : le nettoyage est intégré.

Liste de vérification du nettoyage

  • setInterval/setTimeout -> effacez-les.
  • addEventListener -> supprimez-le.
  • fetch -> annulez-le avec AbortController.
  • abonnements -> appelez unsubscribe.
  • surveillances manuelles -> appelez la fonction d’arrêt renvoyée.

Vérification rapide

Testez vos connaissances sur le nettoyage.

Récapitulatif

Les notions essentielles du nettoyage :

  • onUnmounted s’exécute après la suppression — libérez les ressources ici.
  • Effacez les intervalles et les délais, supprimez les écouteurs, annulez les requêtes de données et désabonnez-vous.
  • watch renvoie une fonction d’arrêt à appeler dans onUnmounted lorsque cela est nécessaire.
  • watchEffect fournit une fonction de rappel onCleanup pour le nettoyage propre à chaque exécution.

Questions Fréquemment Posées

La leçon « onUnmounted et stratégies de nettoyage » est-elle gratuite ?

Oui — le texte complet de « onUnmounted et stratégies de nettoyage » 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 « onUnmounted et stratégies de nettoyage » ?

Suppression des intervalles, retrait des écouteurs d’événements, annulation des requêtes dans onUnmounted. 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 4 sur 4.

Combien de temps prend la leçon « onUnmounted et stratégies de nettoyage » ?

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

  1. Vue d’ensemble des phases du cycle de vie
  2. onMounted et onBeforeMount
  3. onUpdated et onBeforeUpdate
  4. onUnmounted et stratégies de nettoyage
← Retour à Vue Academy