4. Cycle de vie

Présentation

L’état des composants d’une application est amené à évoluer au cours du temps. Lorsque vous recevez des informations depuis une API, que votre utilisateur clique ou survole un élément, ou simplement après un certain temps passé sur l’une de vos pages, vous aimeriez que certaines actions se produisent.

Dans le chapitre précédent, nous avons vu qu’il serait intéressant de récupérer les données de notre API à la création de notre composant DogsGallery. Dans ce chapitre, nous allons détailler les différentes étapes du cycle de vie d’un composant, et comment y associer des actions grâce aux hooks.

Les étapes du cycle de vie d’un composant

Création, mise à jour et destruction

La vie d’un composant se découpe tout d’abord en trois phases successives :

• Une séquence de création : initiée à l’instanciation d’un composant, elle gère en plusieurs étapes la mise en place du composant dans son état initial.
• Une boucle de mise à jour : à chaque fois qu’une donnée (props ou data) présente dans le composant est modifiée, à la suite d’un évènement par exemple, cette boucle est chargée de répercuter ce changement dans l’ensemble du composant.
• Une séquence de destruction : initiée lorsque l’instance du composant est supprimée et elle gère les répercussions de la destruction sur l’application.

C’est trois séquences et leurs étapes sont communément représentées sous la forme d’un schéma :

Séquence de création

Cette séquence présente un nombre important d’étapes. Nous allons y distinguer 4 moments importants :

• beforeCreate : ce moment correspond au tout début de l’initialisation de l’instance de notre composant. La configuration (méthodes, props, data, etc.) de notre composant n’a pas encore été initialisée. Les objets du DOM correspondant au HTML de notre template n’ont également pas été créés. Nos actions sur notre instance sont alors très limitées.
• created : à ce moment, notre configuration a été initialisée, il nous est possible d’accéder aux props, méthodes et données de notre instance. Par contre, les éléments HTML de notre template n’ont pas encore été intégrés. Cela signifie notamment qu’aucune donnée n’y a encore été injectée.
• beforeMount : à ce moment, Vue.js a effectué la compilation de notre template afin de générer le DOM Virtuel, que nous verrons au prochain chapitre. Cela signifie que les données et props de notre instance y ont été injectées. Vue.js a également interprété les directives présentes dans notre template, et initié les instances des composants enfants de celui en cours de création. Toutefois, aucun élément HTML n’a encore été rendu : notre instance n’existe pas encore dans le DOM du navigateur.
• mounted: cette fois, notre instance a entièrement été initialisée. Vue.js a rendu les éléments HTML de notre template et les a ajoutés au DOM de notre page. Notre instance est désormais visible et il vous est possible de manipuler ses objets via le DOM du navigateur.

Boucle de mise à jour

L’une des forces de Vue.js est qu’à chaque fois qu’une donnée sera modifiée dans votre composant, le framework s’occupera de répercuter cette modification sur les objets du DOM existant.

Si le clique d’un utilisateur modifie par exemple la valeur d’une des données de notre composant, et que la valeur de cette donnée est affichée dans un paragraphe de notre site, alors Vue.js se chargera de modifier le paragraphe pour y placer la nouvelle valeur automatiquement.

On distingue donc logiquement 2 moments dans ce processus :

• beforeUpdate: à ce moment, Vue.js s’apprête à modifier une donnée de l’instance du composant. Il peut s’agir d’une props ou d’une data. La valeur n’a pas encore été modifiée et le DOM est dans son état précédent.
• updated : à ce moment, la donnée a été modifiée et les répercussions sur le DOM viennent d’être appliquées.

REMARQUE

📌 Ces étapes se produisent à chaque modification d’une donnée dans votre composant. Si vous souhaitez effectuer une action lorsqu’une donnée spécifique est modifiée, ou recalculer une donnée qui dépend d’une autre, il sera plus adapté de passer par le système des observateurs ou des données calculées, que nous verrons dans la partie suivante.

Séquence de destruction

La séquence de destruction s’exécute lorsqu’une instance du composant est détruite. Elle comprend deux moments :

• beforeUnmount : L’instance du composent s’apprête à être détruite. Ses props, méthodes et données sont toujours accessibles.
• unmounted : L’instance du composent a été détruite, ainsi que les instances des composants la constituant. Elle n’existe plus dans le DOM.

Les hooks

Les hooks sont des propriétés qui nous permettent de personnaliser l’un des moments du cycle de vie de nos composants avec des actions additionnelles.

Utiliser un hook

Pour utiliser un hook, il suffit de définir la fonction a exécuter dans un champ portant le nom du moment ciblé dans la configuration de notre composant :

<script>
export default {
  ...
  beforeUpdate: function() {
    console.log("My component will be updated !")
  }
}
</script>

Pour récupérer les données de notre API, le hook le plus adapté est donc created : il nous permettra de récupérer les données au plus tôt, dès la définition de notre méthode retrieveDogData et de notre donnée dogsData:

<script>
import getDogsData from '@/services/api/dogsRepository.js'

export default {
  name: 'DogsGallery',
  data() {
    return {
      dogsData: []
    }
  },
  created: function() {
    this.retrieveDogsData()
  },
  methods: {
      async retrieveDogsData() {
          this.dogsData = await getDogsData()
      }
  }
}
</script>

Il nous est possible de faire appel à nos méthodes dans les fonctions définies pour les hooks grâce au mot-clé this suivi du nom de notre méthode. Nous pourrions de la même façon faire appel à l’une de nos méthode dans une autre méthode de notre composant.

TIP

👌 Nous pourrions ici raccourcir la syntaxe de notre hook en définissant directement : created: this.retrieveBreedDogData

Hooks et système asynchrone

Les fonctions exécutées par les hooks sont par nature synchrones, puisqu’elles sont liées à un moment de vie de nos composants. Si une fonction asynchrone est exécutée au sein d’un hook, il faudra donc vous attendre à ce que son exécution se finisse après le moment auquel elle a été rattachée.

Dans le cas de notre appel à l’API dans created, les données ne seront en réalité récupérées qu’après le rendu complet de notre composant, c’est-à-dire après le moment mounted. Il est donc très important de correctement définir une valeur par défaut pour notre donnée dogsData, puisque c’est bien cette valeur qui sera injectée lors du premier rendu de notre composant.

Dès que les informations seront reçues, le composant entrera dans une boucle de mise à jour, qui modifiera la valeur de notre donnée et re-rendra notre instance. Généralement, la récupération de données est tellement rapide que ce processus nous est invisible : nous avons l’impression que les données sont chargées presque instantanément dans notre page.

Conclusion

Les hooks nous permettent d’agir à des moments spécifiques dans la vie des instances de nos composants. Cela nous permet ici de récupérer des données dès la création de notre composant DogsGallery.

Il nous reste toutefois un problème à résoudre. Nous ne savons pas précisément combien de chiens vont être présentés dans les données que nous récupérons. De plus, lorsque nos données ne sont pas encore chargées, nous avons vu que nous avions un tableau vide qui était considéré par défaut. Comment alors gérer dans notre partie template le nombre de fois où nous devons définir notre composant DogCard, présentant un chien spécifique ?

Pour gérer cette volatilité du nombre de chiens à afficher, nous allons avoir besoin des directives.

Aller plus loin

• Sur le cycle de vie :
  • la documentation
  • Un article de Digital Ocean
  • Openclassrooms
• Sur les hooks :
  • La documentation
  • Un article de Plain English