Fonction nextTick() de Vue3

Vue3 全局 APIVue3 API globale

nextTick()C'est une fonction essentielle de Vue 3. Son but est de retarder l'exécution de certaines opérations jusqu'à ce que le prochain cycle de mise à jour du DOM soit terminé. Cette fonction est couramment utilisée pour obtenir immédiatement l'état mis à jour du DOM après que Vue a mis à jour le DOM, ou pour effectuer certaines opérations une fois le rendu du composant terminé.

Pourquoi avons-nous besoin de nextTick() ?

Dans Vue, lorsque vous modifiez des données, Vue ne met pas immédiatement à jour le DOM. Au lieu de cela, il place ces opérations de mise à jour dans une file d'attente et les traite uniformément lors de la prochaine boucle d'événements. Ce mécanisme est appelé la « file d'attente de mise à jour asynchrone ».

Si vous essayez d'accéder au DOM immédiatement après avoir modifié des données, vous constaterez peut-être que le DOM n'a pas encore été mis à jour, ce qui entraîne la récupération d'anciennes données.nextTick()Il existe pour résoudre ce problème, en garantissant que vos opérations sont exécutées une fois la mise à jour du DOM terminée.

Cas d'utilisation de nextTick()

Voici quelques cas d'utilisation courants :

  1. Obtenir immédiatement l'état mis à jour du DOM après modification des données.
  2. Effectuer certaines opérations une fois le rendu du composant terminé, comme l'initialisation de bibliothèques tierces.
  3. Après la mise à jour d'un composant enfant, le composant parent doit effectuer certaines opérations en fonction de l'état du composant enfant.

Utilisation de base de nextTick()

nextTick()Il peut être utilisé directement dans une instance Vue ou dans l'API Composition. Voici des exemples d'utilisation de base :

1. Utilisation dans l'API Options

Exemple

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated Message';
      this.$nextTick(() => {
        console.log('DOM has been updated!');
      });
    }
  }
};

2. Utilisation dans l'API Composition

Exemple

import { ref, nextTick } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');

    const updateMessage = () => {
      message.value = 'Updated Message';
      nextTick(() => {
        console.log('DOM has been updated!');
      });
    };

    return {
      message,
      updateMessage
    };
  }
};

Principe d'implémentation de nextTick()

nextTick()Son implémentation repose sur le mécanisme de boucle d'événements de JavaScript. En interne, Vue préférera utiliserPromise、MutationObserver、setTimeoutet d'autres API asynchrones pour garantir que les fonctions de rappel sont exécutées après la mise à jour du DOM.

Ce qui suit est unnextTick()principe d'implémentation simplifié :

Exemple

let callbacks = [];
let pending = false;

function flushCallbacks() {
  pending = false;
  const copies = callbacks.slice(0);
  callbacks.length = 0;
  for (let i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

function nextTick(callback) {
  callbacks.push(callback);
  if (!pending) {
    pending = true;
    Promise.resolve().then(flushCallbacks);
  }
}

Notes

  1. Éviter l'usage excessif：nextTick()Bien qu'il soit très utile, son usage excessif peut compliquer la logique du code. Essayez de ne l'utiliser que lorsque c'est vraiment nécessaire.
  2. Combinaison avec les composants asynchrones: Lorsque vous utilisez des composants dynamiques ou asynchrones,nextTick()il peut vous aider à effectuer certaines opérations après le chargement du composant.
  3. Compatibilité：nextTick()Cela dépend des API asynchrones modernes de JavaScript. Assurez-vous que votre environnement d'exécution prend en charge ces API.

Vue3 全局 APIVue3 API globale

Autres extensions