Cycle de vie des composants Vue.js

Introduction au cycle de vie des composants#

Le cycle de vie des composants est une étape essentielle dans le développement d'applications Vue.js. Chaque instance de composant passe par une série d'étapes d'initialisation lors de sa création. Ces étapes comprennent la configuration de l'observation des données, la compilation du template, le montage de l'instance dans le DOM, et la mise à jour du DOM lorsque les données changent. Pendant ce processus, des fonctions appelées "hooks du cycle de vie" sont exécutées, offrant aux développeurs la possibilité d'ajouter leur propre code à des moments spécifiques.

Les hooks du cycle de vie#

Les hooks du cycle de vie sont des fonctions fournies par Vue.js qui sont automatiquement appelées à différentes étapes du cycle de vie d'un composant. Les hooks les plus couramment utilisés sont onMounted, onUpdated et onUnmounted. Le hook onMounted permet d'exécuter du code après que le composant a terminé son rendu initial et créé les nœuds DOM. Le hook onUpdated est appelé chaque fois que le composant est mis à jour, tandis que le hook onUnmounted est exécuté lorsque le composant est supprimé du DOM.

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

Le hook onMounted#

Le hook onMounted est particulièrement utile pour effectuer des actions après le rendu initial du composant et la création des nœuds DOM. Par exemple, il peut être utilisé pour effectuer des requêtes API, initialiser des plugins externes ou configurer des écouteurs d'événements. Lorsque le hook onMounted est appelé, Vue associe automatiquement la fonction de rappel enregistrée à l'instance du composant active. Dans notre exemple, le code utilise le hook onMounted pour effectuer une requête API et récupérer des données sur des personnes à partir d'une URL.

Les bonnes pratiques pour l'utilisation des hooks#

Il est important de suivre certaines bonnes pratiques lors de l'utilisation des hooks du cycle de vie. Tout d'abord, il est essentiel d'enregistrer les hooks de manière synchrone pendant la configuration du composant. Il ne faut pas retarder l'enregistrement des hooks en utilisant des fonctions asynchrones ou des délais. De plus, il est recommandé de respecter l'ordre d'appel des hooks et d'éviter les appels conditionnels ou les boucles qui peuvent entraîner des comportements inattendus.

setTimeout(() => {
  onMounted(() => {
    // this won't work.
  })
}, 100)

Utilisation des hooks en dehors de <script setup>#

Bien que l'utilisation des hooks soit généralement recommandée à l'intérieur de la section <script setup>, il est également possible de les appeler en dehors de cette section. Cependant, il est important de respecter certaines conditions pour garantir un appel synchrone des hooks. Par exemple, l'appel doit être effectué depuis une fonction externe avec une pile d'appels synchrone, et l'appel doit être effectué à partir de la fonction setup() ou de la section <script setup>. Des exemples d'utilisation des hooks en dehors de <script setup> peuvent être donnés pour illustrer cette possibilité.

https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram