Formation Vue 3 | Comprendre le Cycle de Vie des Composants

Qu’est-ce que le cycle de vie des composants ?

Vue.js est un framework JavaScript qui utilise le concept de composants pour la construction d’interfaces utilisateur. Chaque composant a son propre cycle de vie, qui décrit les étapes que le composant traverse, depuis sa création jusqu’à sa destruction.

Les cycles de vie des composants Vue.js sont importants car ils permettent aux développeurs de contrôler leur comportement à chaque étape de leur existence.

Le cycle de vie d’un composant Vue.js est divisé en trois phases principales :

Création
Mise à jour
Suppression

Hooks

Vue.js, comme de nombreuses autres technologies de développement, propose aux développeurs de greffer leur propre code à certaines de ces 3 étapes spécifiques. On dit qu’on invoque des « ancres de cycles de vie », plus communément appelées « lifecycle hooks » en anglais, lors de l’exécution de notre application.

Détaillons les ancres/crochets principaux qui interviennent dans le cycle de vie des composants Vue.js en les regroupant par grande phase.

Création

Hook	Moment	Rôle
`beforeCreate()`	Avant l’instanciation du composant	Initialisation des injections de dépendances externes. Initialisation des options de l’instance Vue.js.
`created()`	Après l’instanciation du composant	Initialisation des données réactives, propriétés calculées, méthodes et observateurs.
`beforeMount()`	Avant le montage du composant dans le DOM	Configuration des options de rendu et compilation du template.
`mounted()`	Après le montage du composant dans le DOM	Insertion de l’instance Vue.js dans le DOM. Accès aux éléments du DOM rendu du composant.

Mise à jour

Hook	Moment	Rôle
`beforeUpdate()`	Avant que le composant mette à jour son arborescence DOM en raison d’un changement d’état réactif.	Accès à l’état du DOM rendu du composant avant sa mise à jour.
`updated()`	Après que le composant ait mis à jour son arborescence DOM en raison d’un changement d’état réactif.	Accès à l’état du DOM rendu du composant après sa mise à jour.

Suppression

Hook	Moment	Rôle
`beforeUnmount()`	Avant le démontage du composant du DOM	Accès à l’état du DOM rendu du composant avant sa suppression.
`unmounted()`	Après le démontage du composant du DOM	Plus d’accès à l’état du DOM rendu du composant.

Déclarer un hook

Ces instructions sont à déclarer dans une option de notre instance de Vue.js (ou d’un autre composant). Cette option est caractérisée par une fonction nommée selon le nom du cycle de vie auquel nous souhaitons nous rattacher.

Voici quelques exemples brefs de cycles de vie et de leur utilité potentielle :

MyComponent.vue

copié !

export default {
	data() {
		return { ... }
	},
	created() {
		// Le composant est créé, je peux récupérer des données en provenance d'une API avec fetch()
	},
	mounted() {
		// Le composant a été monté sur le DOM, c'est par exemple le moment de manipuler la structure HTML
	},
	beforeUnmount() {
		// Le composant a été supprimé du DOM. Il pourrait être intéressant de supprimer des timers et écouteurs d'événements (à des éléments DOM non gérés par Vue.js) afin d'éviter de les cumuler lors de la navigation sur le site. 
	}
}

Diagramme des cycles de vie

Le diagramme des cycles de vie ci-dessous illustre les différents moments où se greffent et sont accessibles des hooks, lors de l’exécution d’une application Vue.js. Ce schéma est complexe à comprendre au début, mais s’éclaircit au fur et à mesure que nous nous familiarisons avec l’écosystème Vue.js, et devient alors une référence utile.

Diagramme des cycles de vie des composants