Créez une application web avec Vue.js

Découvrez le cycle de vie d’un composant

L'un des indicateurs les plus couramment utilisés pour mesurer la performance d'un site est le temps nécessaire avant que l'utilisateur puisse interagir avec le site. Par conséquent, il vaut mieux éviter que notre code entier ne commence à s'exécuter que lorsque le chargement de la page se termine. Cela ajouterait du temps d'attente et dégraderait la performance de notre site. Et si je vous disais que le code peut s'exécuter à part, avant que vos composants ne soient affichés à l'écran ?

Les frameworks JavaScript ont bien intégré ce besoin, et permettent d'exécuter notre code à différents moments. Pour résoudre ce problème, la plupart des frameworks utilisent le concept de cycle de vie des composants (components lifecycle), qui définit une série d'étapes par lesquelles un composant passe, de sa création à sa disparition. Bien sûr, Vue ne déroge pas à la règle. 😎

Il existe 3 étapes majeures dans le cycle de vie d'un composant :

1. Create - qui représente la durée pendant laquelle le composant est en construction.

2. Mount - qui représente le moment durant lequel le composant va être rendu sur notre page.

3. Destroy - qui représente le moment où le composant va être retiré de la page.

Il est très utile de connaître ces étapes, car vous aurez besoin de définir une stratégie concernant le moment où une action particulière doit s'exécuter. En effet, en planifiant au mieux le moment où chaque action se produit, vous vous assurez de la meilleure expérience utilisateur possible pour votre application.

Découvrez les hooks de cycle de vie

Pour résoudre ce problème de timing, les frameworks comme Vue proposent des hooks de cycle de vie (life cycle hooks). Ils permettent d'accéder à des événements spécifiques autour de ces étapes. Nous pouvons ainsi réaliser des actions comme déclencher du code qui fait appel à des API, avant même l'apparition du composant sur la page. Les principaux hooks que nous verrons ici sont les suivants :

1. beforeCreate

2. created

3. beforeMount

4. mounted

5. beforeDestroy

6. destroyed

Comme vous pouvez le voir dans la liste, chaque étape dont je vous ai parlé plus tôt est accompagnée d'une paire de hooks de cycle de vie, ce qui va vous permettre d'exécuter le code avant et après l'apparition de l'étape. Cela a son importance, car certaines actions ne sont tout simplement pas réalisables pendant certains hooks du cycle de vie. Par exemple, modifier des attributs sur un élément HTML pendant  beforeCreate  serait impossible puisque l'élément n'existe même pas encore.

Utilisez des hooks de cycle de vie

L'utilisation des hooks de cycle de vie est particulièrement facilitée par Vue.

De la même façon que vous définiriez  data  ou  computed, il s'agit simplement d'ajouter une autre propriété à votre objet de configuration de Vue. La seule différence réside dans le fait qu'il s'agit de fonctions plutôt que de simples chaînes de caractères :

<template>
    <h1>Je suis un nouveau composant !</h1>
</template>

<script>
    export default {
        data: { msg: 'Bonjour !' },
        beforeCreate() { console.log('Je ne suis pas encore  créé') },
        created() { console.log('Je suis créé !') },
        beforeMount() { console.log('Je vais bientôt être monté sur le DOM!') },
        mounted() { console.log('Je suis monté sur le DOM!') },
        beforeDestroy() { console.log('Je suis sur le point de disparaître du DOM !') },
        destroyed() { console.log('Je suis supprimé') }
    }
</script>

À l'intérieur de vos hooks de cycle de vie, vous pouvez écrire n'importe quel code JavaScript dont vous avez l'habitude et faire référence à n'importe quelle propriété standard de Vue (par exemple, data, computed, etc.) avec le préfixe  this, comme partout ailleurs.

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P2C4-Begin.

Instructions

Utilisez un hook de cycle de vie avant que  MenuItem  ne soit rendu pour vérifier si la date de la  journée est paire. Si c'est le cas, le prix de chaque article devrait être affiché avec une réduction de 10 %.

En résumé

Fort de vos nouvelles connaissances sur les hooks de cycle de vie, vous pouvez maintenant :

•     définir une stratégie pour fixer le meilleur moment auquel un code donné va s'exécuter ;

•     implémenter des hooks de cycle de vie dans votre application en cas de besoin.

Avec cela en tête, passons au chapitre suivant, dans lequel nous résumerons tout ce que vous avez appris dans cette partie du cours, pour pouvoir très bientôt nous atteler au quiz de fin de partie ! 💪