web-dev-qa-db-fra.com

Qu'est-ce que nextTick ou que fait-il dans VueJs?

J'ai lu la documentation, mais je n'arrive pas à comprendre. Je sais ce que les données, calculées, regardent, les méthodes font mais à quoi sert nextTick() pour in vuejs?

vue.jsvuejs2
53
hidar

nextTick vous permet de faire quelque chose après avoir modifié les données et VueJS a mis à jour le DOM en fonction de vos modifications, mais avant que le navigateur ne les ait restituées sur la page.

Normalement, les développeurs utilisent la fonction JavaScript native setTimeout pour obtenir un comportement similaire. Cependant, l'utilisation de setTimeout permet de ne pas contrôler le navigateur avant qu'il ne vous redonne le contrôle via votre rappel.

Disons que vous avez modifié certaines données. Vue met à jour le DOM en fonction des données. Notez que les modifications DOM ne sont pas encore restituées à l'écran par le navigateur. Si vous avez utilisé nextTick, votre rappel est appelé maintenant. Ensuite, le navigateur met à jour la page. Si vous utilisiez setTimeout, votre rappel ne serait appelé que maintenant.

Vous pouvez visualiser ce comportement en créant un petit composant comme suit:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

Exécutez votre serveur local. Vous verrez le message Three affiché.

Maintenant, remplacez votre this.$nextTick par setTimeout

setTimeout(() => {
    this.msg = 'Three';
}, 0);

Rechargez le navigateur. Vous verrez Two avant de voir Three.

Vérifiez ce violon pour voir en direct

En effet, Vue a mis à jour le DOM en Two et a donné le contrôle au navigateur. Navigateur affiché Two. Ensuite, appelé votre rappel. Vue a mis à jour le DOM en Three. Le navigateur a de nouveau affiché.

Avec nextTick. Vue a modifié le DOM pour Two. Appelé votre rappel. Vue a mis à jour le DOM en Three. Puis donné le contrôle au navigateur. Et le navigateur affiche Three.

J'espère que c'était clair.

Pour comprendre comment Vue implémente cela, vous devez comprendre le concept de Boucle d'événement et microtasks .

Une fois que vous avez clarifié (eu) ces concepts, vérifiez le code source de nextTick .

82
Prashant

Suivant La coche suivante vous permet fondamentalement d’exécuter du code après que le vue a rendu le composant à nouveau lorsque vous avez apporté quelques modifications à la propriété réactive (données).

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // this function is called when vue has re-rendered the component.
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
      // this function is called when vue has re-rendered the component.
})

De la documentation de Vue.js:

Reporter le rappel à exécuter après le prochain cycle de mise à jour du DOM. Utilisez-le immédiatement après avoir modifié certaines données pour attendre la mise à jour DOM.

En savoir plus à ce sujet, ici .

11
Daksh Miglani

La documentation de Vue dit:

Vue.nextTick ([callback, context])

Reporter le rappel à exécuter après le prochain cycle de mise à jour du DOM. Utilisez-le immédiatement après avoir modifié certaines données pour attendre la mise à jour DOM.

Hmm ..., si ça semble intimidant au début, ne vous inquiétez pas, je vais essayer de l'expliquer le plus simplement possible. Mais d'abord, il y a 2 choses que vous devriez savoir:

  1. Son utilisation est rare. Comme une de ces cartes magiques d'argent. J'ai écrit plusieurs applications Vue et j'ai rencontré nextTick () une ou deux fois.

  2. Il est plus facile de comprendre une fois que vous avez vu des cas d’utilisation concrets. Une fois que vous avez eu l’idée, la peur disparaîtra et vous aurez un outil pratique à votre ceinture.

Allons-y, alors.

Comprendre $ nextTick

Nous sommes des programmeurs, n'est-ce pas? Nous allons utiliser notre approche bien-aimée de division et de conquête pour essayer de traduire la description de .nextTick() peu à peu. Ça commence par:

Reporter le rappel

Ok, maintenant nous savons qu'il accepte un rappel. Alors ça ressemble à ça:

Vue.nextTick(function () {
  // do something cool
});

Génial. Ce rappel est différé (c'est ainsi que les millénaires disent différé) jusqu'à ce que…

le prochain cycle de mise à jour du DOM.

D'accord. Nous savons que Vue effectue des mises à jour DOM de manière asynchrone . Il offre un moyen de conserver ces mises à jour "stockées" jusqu'à ce qu'il soit nécessaire de les appliquer. Il crée une file d'attente de mises à jour et le vide en cas de besoin. Ensuite, le DOM est "corrigé" et mis à jour vers sa dernière version.

Quoi?

Laissez-moi essayer à nouveau: imaginez que votre composant effectue quelque chose de vraiment essentiel et intelligent comme this.potatoAmount = 3. Vue ne restitue pas le rendu du composant (et donc du DOM) automatiquement. Il mettra en file d'attente la modification requise. Ensuite, dans la prochaine "tick" (comme dans une horloge), la file d'attente est vidée et la mise à jour est appliquée. Tada!

D'accord! Nous savons donc que nous pouvons utiliser nextTick() pour transmettre une fonction de rappel exécutée juste après les données sont définies et le DOM a été mis à jour.

Comme je l'ai dit plus tôt… pas si souvent. L’approche "flux de données" qui anime Vue, React et l’autre de Google, que je ne mentionnerai pas, rend la plupart du temps inutile. Cependant, nous devons parfois attendre que certains éléments apparaissent/disparaissent/soient modifiés dans le DOM. C'est à ce moment que nextTick est utile.

Utilisez-le immédiatement après avoir modifié certaines données pour attendre la mise à jour DOM.

Exactement! Ceci est le dernier élément de définition que Vue docs nous a fourni. Dans notre rappel, le DOM a été mis à jour afin que nous puissions interagir avec la version la plus à jour.

Prouvez-le

OK OK. Consultez la console et vous verrez que la valeur de nos données n’est mise à jour que dans le rappel de nextTick:

const example = Vue.component('example', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  mounted () {
    this.message = 'updated'

        console.log(
        'outside nextTick callback:', this.$el.textContent
    ) // => 'not updated'

    this.$nextTick(() => {
      console.log(
        'inside nextTick callback:', this.$el.textContent
      ) // => 'not updated'
    })
  }
})


new Vue({
  el: '#app',
    render: h => h(example)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app"></div>

Un cas d'utilisation

Essayons de définir un cas d’utilisation utile pour nextTick.

Imaginez que vous deviez exécuter une action lorsqu'un composant est monté. MAIS! non seulement le composant. Vous devez également attendre que tous ses enfants soient montés et disponibles dans le DOM. Zut! Notre crochet monté ne garantit pas le rendu de l’arborescence complète des composants.

Si seulement nous avions un outil pour attendre le prochain cycle de mise à jour du DOM…

Hahaa:

mounted() {
  this.$nextTick(() => {
    // The whole view is rendered, so I can safely access or query
    // the DOM. ¯\_(ツ)_/¯
  })
}

En bref

Donc: nextTick est un moyen pratique d’exécuter une fonction une fois les données définies et le DOM mis à jour.

Vous devez attendre le DOM, peut-être parce que vous devez effectuer une transformation ou attendre une bibliothèque externe pour charger son contenu. Ensuite, utilisez nextTick.

Certaines personnes utilisent également nextTick dans leurs tests unitaires pour s'assurer que les données ont été mises à jour. De cette façon, ils peuvent tester la “version mise à jour” du composant.

Vue.nextTick () ou vm. $ NextTick ()?

Ne t'inquiète pas. Les deux sont (presque) identiques. Vue.nextTick() fait référence à la méthode API globale, tandis que vm.$nextTick() est une méthode d'instance. La seule différence est que vm.$nextTick n’accepte pas de contexte en tant que deuxième paramètre. Il est toujours lié à this (également appelée instance elle-même).

Un dernier morceau de fraîcheur

Notez que nextTick retourne un Promise, afin que nous puissions aller complètement cool avec async/await et améliorer l'exemple:

async mounted () {
    this.message = 'updated'
    console.log(this.$el.textContent) // 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // 'updated'
}

Le contenu a été extrait de By Adrià Fontcuberta

7
Humoyun Ahmad

Pour rendre la réponse de Pranshat plus explicite sur l'utilisation de nextTick et de setTimeout, j'ai ajouté son violon: ici

mounted() {    
  this.one = "One";

  setTimeout(() => {
    this.two = "Two"
  }, 0);

  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

Vous voyez dans le violon que lors de l’utilisation de setTimeOut, les données initiales clignotent très brièvement une fois le composant monté avant d’adapter la modification. Considérant que, lors de l’utilisation de nextTick, les données sont détournées avant d’être rendues au navigateur. Le navigateur affiche donc les données mises à jour sans même connaître l’ancien. J'espère que ça efface les deux concepts en un seul coup.

5
Wale