Comprendre mounted() dans Vue.js

Lorsque nous construisons une application avec Vue.js, nous avons souvent besoin d’effectuer certaines actions après que notre composant soit rendu et ajouté à la page. Ces actions peuvent inclure l’envoi d’une requête API, l’initialisation d’une bibliothèque JavaScript externe, ou l’interaction avec le DOM. C’est dans ce contexte que le hook mounted() prend tout son sens.

Pourquoi utiliser mounted() ?

Le hook mounted() nous sert de signal. Il nous indique que notre composant est désormais prêt à être utilisé, une fois que le DOM a été inséré et que tout est visible dans le navigateur. C’est l’endroit parfait pour lancer des opérations telles que l’initialisation de bibliothèques externes ou des requêtes API. En somme, il s’agit du moment idéal pour exécuter toute action qui doit se faire une fois que le composant est affiché à l’utilisateur.

Dans notre application de gestion de vidéos musicales, par exemple, une fois qu’un composant est monté, nous pourrions vouloir récupérer des informations relatives à une vidéo spécifique. L’interface de l’utilisateur doit d’abord se charger, et une fois prête, c’est à ce moment que l’on peut récupérer les détails nécessaires.

Modifier le titre de la page

Imaginons que nous souhaitons changer le titre de la page dès qu’un composant particulier est monté. Nous voulons que ce changement se fasse une fois que l’élément soit visible à l’écran. C’est exactement ce que fait mounted().

<template>
  <div>
    <h1>Mon composant</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // Dès que le composant est monté, on change le titre de la page
    document.title = "Titre mis à jour après montage";
  }
};
</script>

<template>
  <div>
    <h1>Mon composant</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // Dès que le composant est monté, on change le titre de la page
    document.title = "Titre mis à jour après montage";
  }
};
</script>

Dès que le composant est monté, le titre de la page devient « Titre mis à jour après montage ». Ce changement simple mais efficace garantit que l’action se produit une fois que l’élément est pleinement visible.

Récupérer des données après le montage dans notre application vidéo

Dans notre application de gestion de vidéos musicales, nous avons la possibilité de récupérer les informations d’une vidéo spécifique une fois le composant monté. Cela nous permet de n’effectuer l’appel API qu’une seule fois, lorsque le composant est réellement prêt, plutôt que de gérer cela à l’avance.

<template>
  <div>
    <h2>Vidéo sélectionnée : {{ videoTitle }}</h2>
    <p>{{ videoDetails }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoTitle: 'Sample Video',
      videoDetails: 'Chargement des détails...'
    };
  },
  mounted() {
    // Effectuer une requête API pour récupérer les détails de la vidéo
    fetch(`https://api.example.com/videos/${this.videoTitle}`)
      .then(response => response.json())
      .then(data => {
        this.videoDetails = data.details;
      })
      .catch(error => {
        console.error('Erreur API :', error);
        this.videoDetails = 'Erreur lors du chargement des détails.';
      });
  }
};
</script>

<template>
  <div>
    <h2>Vidéo sélectionnée : {{ videoTitle }}</h2>
    <p>{{ videoDetails }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoTitle: 'Sample Video',
      videoDetails: 'Chargement des détails...'
    };
  },
  mounted() {
    // Effectuer une requête API pour récupérer les détails de la vidéo
    fetch(`https://api.example.com/videos/${this.videoTitle}`)
      .then(response => response.json())
      .then(data => {
        this.videoDetails = data.details;
      })
      .catch(error => {
        console.error('Erreur API :', error);
        this.videoDetails = 'Erreur lors du chargement des détails.';
      });
  }
};
</script>

Ici, dès que le composant est monté, nous envoyons une requête pour récupérer les détails de la vidéo. Cela nous permet de n’effectuer l’appel qu’une seule fois, en toute efficacité, dès que le composant est visible.

Quand éviter d’utiliser mounted() ?

Il y a des situations où nous devons préparer des données avant même que le composant ne soit monté, ou bien récupérer des données de manière synchrone. Dans ces cas-là, il est plus pertinent d’utiliser le hook created(), qui est exécuté juste après l’initialisation du composant, mais avant qu’il soit monté dans le DOM.

created() {
  // Faire quelque chose avant le montage du composant
  console.log('Composant créé, mais pas encore monté');
}

created() {
  // Faire quelque chose avant le montage du composant
  console.log('Composant créé, mais pas encore monté');
}

Cela permet de préparer l’essentiel avant que l’utilisateur n’interagisse avec l’interface.

Attention aux effets secondaires

Lorsque nous manipulons des bibliothèques tierces ou effectuons des appels API dans mounted(), il faut être vigilant. Si nous interagissons directement avec le DOM ou lançons plusieurs requêtes, il est crucial de nettoyer les ressources ou les événements lorsque le composant est détruit, afin d’éviter des fuites de mémoire.

Vue offre un autre hook, beforeDestroy() (ou unmounted() dans Vue 3), qui nous permet de nous assurer que les ressources utilisées par notre composant sont correctement libérées, comme les événements ou les données externes.

Conclusion

Le hook mounted() est parfait pour exécuter des actions lorsque notre composant devient visible et prêt à interagir avec l’utilisateur. Il nous permet de gérer facilement les appels API ou l’initialisation de bibliothèques externes de manière fluide et performante.

Souvenons-nous que mounted() est destiné aux actions qui se déroulent après le rendu. Pour les tâches avant ou pendant l’initialisation du composant, created() sera plus adapté. Cette séparation nous aide à garder notre code propre et réactif.

Dans notre prochain article, nous découvrirons comment utiliser watch() pour observer des changements dans nos données et réagir en temps réel sans avoir à attendre le montage du composant.