Comprendre les hooks de cycle de vie dans Vue.js

Si vous développez des applications Vue et vous vous demandez quand récupérer des données, nettoyer des ressources ou interagir avec le DOM, vous devez comprendre les hooks de cycle de vie. Ces hooks constituent l’épine dorsale du comportement des composants dans Vue 3, pourtant de nombreux développeurs peinent à savoir quel hook utiliser et quand.

Cet article explique les hooks de cycle de vie de Vue 3 en utilisant la Composition API, couvrant chaque phase depuis la création du composant jusqu’à sa destruction avec des exemples pratiques que vous pouvez appliquer immédiatement.

Le hook Setup : le point d’entrée de votre composant

Le hook setup est la pierre angulaire de la Composition API de Vue 3, remplaçant à la fois beforeCreate et created de Vue 2. Il s’exécute avant que l’instance du composant ne soit complètement initialisée, ce qui en fait l’endroit idéal pour définir l’état réactif et composer la logique de votre composant.

import { ref, reactive } from 'vue'

export default {
  setup(props, context) {
    const count = ref(0)
    const user = reactive({ name: '', email: '' })
    
    // Logic runs immediately, before template compilation
    console.log('Component initializing')
    
    return { count, user }
  }
}

Contrairement à l’Options API de Vue 2, la fonction setup reçoit props et context comme paramètres, vous donnant un accès direct aux propriétés du composant sans utiliser this.

Phase de montage : onBeforeMount et onMounted

onBeforeMount() - Préparation pré-DOM

Le hook onBeforeMount se déclenche après setup mais avant que le DOM du composant ne soit créé. Utilisez-le pour les opérations qui doivent se produire avant le rendu mais qui ne nécessitent pas d’accès au DOM.

import { onBeforeMount } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // Initialize non-DOM dependent resources
      console.log('Template compiled, DOM not yet created')
    })
  }
}

onMounted() - Opérations DOM prêtes

onMounted est l’endroit où se produit la plupart des initialisations liées au DOM. Le template du composant a été rendu et inséré dans le document, ce qui permet d’accéder en toute sécurité aux éléments et d’initialiser des bibliothèques tierces.

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const chartContainer = ref(null)
    
    onMounted(async () => {
      // Fetch data after component mounts
      const data = await fetch('/api/data').then(r => r.json())
      
      // Initialize chart library with DOM element
      // Assuming Chart is imported from a charting library
      new Chart(chartContainer.value, { data })
    })
    
    return { chartContainer }
  }
}

Phase de mise à jour : changements d’état réactif

onBeforeUpdate() - Logique pré-rendu

Lorsque les changements de données réactives déclenchent un nouveau rendu, onBeforeUpdate s’exécute en premier. C’est votre dernière chance de lire l’état actuel du DOM avant que Vue ne le mette à jour.

import { onBeforeUpdate } from 'vue'

export default {
  setup() {
    onBeforeUpdate(() => {
      // Capture current scroll position before DOM updates
      const scrollY = window.scrollY
      // Store or use scrollY as needed
    })
  }
}

onUpdated() - Opérations post-rendu

Après que Vue a mis à jour le DOM, onUpdated se déclenche. Soyez prudent ici : modifier l’état réactif peut causer des boucles infinies.

import { onUpdated } from 'vue'

export default {
  setup() {
    onUpdated(() => {
      // DOM has been updated
      // Use nextTick() for specific state change reactions
      console.log('Component re-rendered')
    })
  }
}

Phase de démontage : nettoyage du composant

onBeforeUnmount() - Tâches de pré-nettoyage

Avant qu’un composant ne soit supprimé, onBeforeUnmount vous donne accès au composant pleinement fonctionnel une dernière fois.

import { onBeforeUnmount, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ data: 'important info' })
    
    onBeforeUnmount(() => {
      // Save component state or notify external systems
      localStorage.setItem('lastState', JSON.stringify(state))
    })
    
    return { state }
  }
}

onUnmounted() - Nettoyage des ressources

onUnmounted est crucial pour prévenir les fuites mémoire. Nettoyez les écouteurs d’événements, les timers et les abonnements ici.

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let timer
    
    const handleResize = () => {
      console.log('Window resized')
    }
    
    onMounted(() => {
      timer = setInterval(() => {
        console.log('Polling...')
      }, 1000)
      
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      clearInterval(timer)
      window.removeEventListener('resize', handleResize)
    })
  }
}

Patterns pratiques et bonnes pratiques

Retenez ces points clés lorsque vous travaillez avec les méthodes de cycle de vie de Vue 3 :

1. Importez toujours les hooks depuis ‘vue’ avant de les utiliser
2. Appelez les hooks de manière synchrone à l’intérieur de setup() — pas dans des callbacks ou des promesses
3. Migration de Vue 2 vers Vue 3 : beforeDestroy devient onBeforeUnmount, destroyed devient onUnmounted
4. Rendu côté serveur : les hooks de montage et de mise à jour ne s’exécutent pas pendant le SSR

Pour tester les composants avec des hooks de cycle de vie, utilisez Vue Test Utils pour déclencher et vérifier correctement le comportement des hooks.

Conclusion

Les hooks de cycle de vie de la Composition API de Vue 3 offrent un contrôle précis sur le comportement de votre composant à chaque étape. En comprenant quand chaque hook se déclenche et quelles ressources sont disponibles, vous pouvez écrire des composants plus propres et plus performants. Commencez avec setup() pour l’initialisation, utilisez onMounted() pour les opérations DOM, et nettoyez toujours dans onUnmounted() pour éviter les fuites mémoire.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.