Comprendre Vue.js nextTick

Qu’est-ce que nextTick dans Vue.js et comment peut-il aider de grandes bases de code ?

L’une des questions les plus courantes que les gens me posent lorsqu’ils commencent à apprendre Vue est : que fait Vue.nextTick ? Aurai-je besoin de l’utiliser dans mes projets ? 🤔

Qu’est-ce que je leur réponds ? 🤓 Oui, bien sûr ! Je l’utilise régulièrement sur des bases de code plus importantes, ce qui m’a aidé à résoudre quelques problèmes plus d’une fois.

☝🏼 Mais, comme pour toutes les fonctionnalités de Vue, il est essentiel de comprendre ce qu’elle fait précisément pour savoir quand vous devez vous y fier (et quand vous ne devez pas). 🤦🏻‍♀️ J’ai vu quelques scénarios étranges où les gens l’utilisaient beaucoup, apportant beaucoup de complexité à l’application alors qu’ils auraient dû prendre du recul et réfléchir davantage à l’architecture de ce qu’ils voulaient accomplir.

😁 C’est pourquoi j’écris cet article.

Mais d’abord, parlons du point commun de chaque composant : son cycle de vie.

Le cycle de vie des composants

Vous connaissez probablement les différentes étapes que traverse un composant ⚙️, mais un petit rappel devrait aider quelques développeurs parmi nous.

• À beforeCreate() correspond à l’initialisation du cycle de vie. 🎬 Il est appelé avant que le moteur Vue ne crée le composant, et rien (événements, données, propriétés, etc.) n’est encore configuré.

• created() s’exécute avant que le DOM ne soit rendu. A ce stade, les données et événements sont accessibles.

• beforeMount() est l’endroit où le modèle et les styles de portée sont compilés, bien que vous ne puissiez toujours pas manipuler le DOM, et le vm.$el l’instance n’a pas encore été créée.

• Quand nous atteignons mounted(), vous pouvez utiliser et manipuler vos composants comme bon vous semble. 💯 Cela signifie que votre composant appartient au DOM.

• beforeUpdate() est pratique pour implémenter la logique ⚙️ avant qu’une modification ne soit apportée à votre composant.

• updated() vous permet d’implémenter n’importe quelle logique dès qu’une modification est apportée au composant. 💨

• Utilisation beforeUnmount() (qui a remplacé beforeDestroy()) pour nettoyer votre composant 🧹 afin de ne pas laisser de variables ou d’événements qui pourraient provoquer des fuites de mémoire dans votre application 😶‍🌫️.

• unmounted() (remplace destroyed()) et peut être utilisé pour effacer des intervalles ou des scripts après la destruction de votre composant 💥.

🧐 Voyons maintenant où se trouve notre nextTick() le crochet tombe.

Tout d’abord, qu’est-ce que Vue.js nextTick ?

➡️ Selon Documentation officielle Vue.js, nextTick() est un utilitaire pour attendre le prochain flush de mise à jour DOM. Cette fonction prend un rappel qui sera exécuté une fois la mise à jour des composants terminée. 🏁 (Cette mise à jour se produit lorsque vous modifiez une propriété de données ou qu’un calcul est modifié.)

export default {
  mounted() {
    this.$nextTick(() => {
      console.log(
        "I will be displayed once the next DOM update cycle is complete."
      );
    });
  },
};

⚠️ Une chose importante à retenir est que Vue met à jour le DOM de manière asynchrone (ainsi, peu importe le nombre de changements d’état appliqués aux composants lors d’une mise à jour, ils se dérouleront tous simultanément ! ☝🏼). Alors seulement, chacun nextTick() rappel est appelé.

Ces rappels peuvent être pratiques lorsque vous souhaitez exécuter quelque chose tout en vous assurant que les accessoires, les données ou le calcul d’un composant enfant sont mis à jour. ⏲ ​​Votre code est retardé après l’exécution du prochain cycle de mise à jour DOM et après que le navigateur a rendu ce changement.

En d’autres termes, le rappel est différé pour être exécuté après le prochain cycle de mise à jour du DOM.

Pourquoi utiliser Vue.js nextTick lorsque nous pouvons utiliser settimeout ?

Comme mentionné précédemment, Vue met à jour de manière asynchrone le DOM. 👉🏼 Alors quand on fait un changement dans le DOM, ça ne se fait pas tout de suite. 🕵🏻 Cela vérifie d’abord qu’il n’y a pas d’autres changements d’état. ALORS SEULEMENT voyez-vous vos modifications rendues sur votre navigateur ! 🎨

Tout cela arrive si vite que vous ne le voyez même pas. 👀 Alors, pourquoi est-ce important ?

👩🏻‍🏫 C’est important parce que, disons, vous devez exécuter une fonction juste après que cette modification a été apportée. C’est là que vous devez utiliser nextTick() attendre la mise à jour du DOM.

C’est à coup sûr pourquoi à un moment donné vous avez dû utiliser setTimeout() (je me trompe ? 😉) car il a fallu laisser un peu de temps au navigateur pour mettre à jour le DOM. Sinon, votre fonction n’a pas été exécutée. 🤷🏻‍♀️

☢️ Mais setTimeout() a son repli. Il exécutera le rappel juste après le prochain tick (la mise à jour DOM), tandis que nextTick() donne la priorité à l’exécution de la fonction de rappel ! ⏱ setTimeout() retarde votre rappel, car il doit d’abord donner le contrôle au navigateur en l’utilisant, puis vous revenir seulement lorsqu’il appelle votre fonction de rappel.

Prenons un exemple ici :

<template>
  <h1>{{ message }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        message: "Joey doesn’t share food!",
      };
    },
    mounted() {
      console.log(this.message);
      this.message =
        "Well, maybe I don't need your money. Wait, wait, I said maybe!";
      console.log(this.message);
      setTimeout(() => {
        this.message = "Hi, I’m Chandler. I make jokes when I’m uncomfortable.";
      console.log(this.message);
      }, 300);
      this.$nextTick(() => {
        this.message =
          "It's a moo point. It's like a cow's opinion; it doesn't matter. It's moo.";
        console.log(this.message);
      });
    },
  };
</script>

👁 Comme vous pouvez le voir, nextTick() est exécuté avant setTimeout(). C’est pourquoi l’utilisation de nextTick() sera plus performante car elle sera exécutée plus rapidement !

Cependant, ☝🏼 il est bon de savoir qu’en dernier recours sur les navigateurs qui ne supportent pas nextTick()Promise et MutationObserver, il revient à setImmediate() sur IE 6-10 et à setTimeout() pour Opéra Mini.

QUELLE? 👂🏼 Je t’entends chuchoter : Pourquoi ne pas utiliser watch() écouter les changements? La réponse courte est que watch() est utilisé pour exécuter quelque chose lorsque les données du composant changenttandis que nextTick() est utilisé pour exécuter du code après la mise à jour de l’application.

Façons d’utiliser Vue.js nextTick

Il existe deux manières d’utiliser Vue.js nextTick : 🛠

👉🏼 La manière la plus courante est de passer une fonction de rappel en premier argument. 👁 Nous avons vu cette structure dans notre exemple précédent ci-dessus.

Avec une fonction de rappel

mounted () {
  this.$nextTick(() => {
    this.message = 'Call me maybe!';
    console.log(this.message);
  });
}

👉🏼 Ou attendez la promesse retournée dont vous auriez besoin si vous rencontrez un Uncaught (in promise) DOMException Erreur. ❌

Dans une promesse régulière :

mounted () {
  this.$nextTick().then(() => {
    this.message = 'You promised!';
    console.log(this.message);
  });
}

Avec Async/Attente :

async mounted () {
  await this.$nextTick(() => {
    this.message = 'I will always wait for you!';
    console.log(this.message)
  });
}

Conclusion

En effet, dans les petites bases de code, on a rarement besoin nextTick(). Cependant, il présente toujours des avantages significatifs, surtout si vous effectuez des appels d’API 🤙🏼 et que vous devez exécuter une logique 🧠 après avoir reçu des données en arrière-plan.

En revanche, 🤓 il est primordial de réfléchir à la logique de votre appli. Si tu utilises $nextTick bien trop souvent, 🤭 vous risquez de complexifier la base de code de votre application.

Faites-moi savoir si j’étais (ou n’étais pas 😜) capable de résoudre le nextTick() mystère pour vous. 😊 Vous pouvez me joindre sur Twitter 🐦 @RifkiNadaou venez voir mes travaux et articles sur 🖥 www.nadarifki.com.

Au revoir, codeurs ! 👋🏼