Qu'est-ce que nextTick ou que faut-il faire dans VueJs

J'ai lu les docs, mais je ne peux pas le comprendre. Je sais ce que sont les données, de calculer, de regarder, de méthodes, mais qu'est-ce que nextTick() utiliser pour en vuejs?

Le concept clé pour comprendre, c'est que le DOM est mis à jour de manière asynchrone. Lorsque vous modifiez une valeur dans la Vue, le changement n'est pas rendu vers les DOM. Au lieu de cela, en Vue de files d'attente un DOM mise à jour, puis, sur une minuterie, les mises à jour du DOM. Normalement, cela se passe si vite qu'il n'est pas de faire une différence, mais, parfois, vous avez besoin de mettre à jour le rendu de la cathédrale Vue a rendu, ce qui vous ne pouvez pas le faire dans une méthode en raison de la mise à jour n'est pas encore arrivé. Dans ces cas, vous devez utiliser nextTick. Documentée ici.

OriginalL'auteur hidar | 2017-12-04

vue.js vuejs2

74

nextTick vous permet de faire quelque chose après que vous avez modifié les données et VueJS a mis à jour le DOM basée sur vos données de changement, mais avant que le navigateur a rendu ceux qui a changé sur la page.

Normalement, les devs utilisent JavaScript natif de la fonction setTimeout pour obtenir un comportement similaire. Mais, à l'aide de setTimeoutabandonne le contrôle sur le navigateur avant qu'elle donne le contrôle de retour pour vous par l'intermédiaire de votre rappel.

Disons, vous avez modifié certaines données. Vue des mises à jour de DOM sur la base des données. L'esprit que vous les DOM changements ne sont pas encore rendus à l'écran par le navigateur. Si vous avez utilisé nextTick, votre callback est appelée à maintenant. Ensuite, les mises à jour du navigateur de la page. Si vous avez utilisé setTimeout, votre rappel appelait seulement maintenant.

Vous pouvez visualiser ce problème par la création d'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écuter votre serveur local. Vous verrez le message Three affichée.

Maintenant, remplacez votre this.$nextTick avec setTimeout
```
setTimeout(() => {
    this.msg = 'Three';
}, 0);
```
Recharger le navigateur. Vous verrez Two, avant de voir Three.

Vérifier ce violon à voir en direct

C'est parce que, Vue mis à jour le DOM Two, a donné le contrôle du navigateur. Le navigateur affiche Two. Puis, appelé votre rappel. Vue mis à jour le DOM Three. Le navigateur affiche de nouveau.

Avec nextTick. Vue udpated le DOM Two. Appelé votre rappel. Vue mis à jour le DOM Three. Puis a donné le contrôle du navigateur. Et, le navigateur affiche Three.

Espère que c'était clair.

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

Une fois que vous avez ces concepts clairs(er), cochez la le code source pour nextTick.

Une chose que je ne comprends pas c'est quand vous dites, "vue met à jour les données" êtes-vous référence à la mise à jour faite avec ex: this.name = 'foo' ou êtes-vous référant à l'injection d'éléments html dans la page?

OriginalL'auteur Prashant
8

Prochaine Tique, fondamentalement vous permet d'exécuter du code, après la vue a rendu le composant lorsque vous avez apporté des modifications à l'un réactif (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 l'Vue.js Documentation:

Reporter le callback à exécuter après la prochaine DOM cycle de mise à jour. Utiliser immédiatement après que vous avez changé certains de données à attendre pour les DOM mise à jour.

Lire plus à ce sujet, ici.

mettre à jour comment? c'est ce que je ne comprend pas. si j'ai la mise à jour de la vm.msg puis le dom est déjà mis à jour, car il y a un nouveau texte "bonjour" .. alors, comment puis-je mettre à jour de nouveau? pouvez-vous poster un violon avec un exemple pls? merci
ok, je vais modifier la réponse et je vais essayer de l'expliquer plus loin.
vous pouvez l'utiliser dans des situations où vous avez à faire plusieurs mises à jour, mais vous voulez faire explicitement référence à chacun des autres à différents dom cycles
Ce n'est pas de vous permettre de mise le DOM en soi, mais faire quelque chose avec elle (que ce soit une mise à jour, lire info, etc) après qu'il a été touché ou modifié par des changements fait par Vue (parce que vous avez changé d'un réactif de la valeur de la propriété, etc).
C'était un exemple pour le rendre plus simple.

OriginalL'auteur Daksh Miglani
5

De faire Pranshat réponse sur la différence entre l'utilisation de nextTick et setTimeout, plus explicite, j'ai fourchue son violon:
ici
```
mounted() {    
  this.one = "One";

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

  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}
```
Vous pouvez le voir dans le violon que lors de l'utilisation de setTimeOut, les données initiales clignote très brièvement une fois que le composant est monté avant de les adapter à ce changement. Considérant que, lors de l'utilisation de nextTick, les données sont détournés, changé, avant d'effectuer le rendu dans le navigateur. Ainsi, le navigateur affiche les données mises à jour, sans même aucune connaissance de l'ancien.
J'espère que efface les deux concepts en un seul coup.

OriginalL'auteur Wale

Vous devez vous connecter pour publier un commentaire.