Was ist nextTick oder was macht es in VueJs?

Ich habe die Dokumente gelesen, kann sie aber nicht verstehen. Ich weiß, was Daten, berechnete, beobachtete und Methoden tun, aber wofür werden sie nextTick()in vuejs verwendet?

Mit nextTick können Sie etwas tun, nachdem Sie die Daten geändert haben und VueJS das DOM basierend auf Ihrer Datenänderung aktualisiert hat, aber bevor der Browser die auf der Seite geänderten Daten gerendert hat.

Normalerweise verwenden Entwickler die native JavaScript-Funktion setTimeout , um ein ähnliches Verhalten zu erzielen. Wenn Sie jedoch verwenden, wird setTimeoutdie Kontrolle an den Browser abgegeben, bevor Sie die Kontrolle über Ihren Rückruf zurückerhalten.

Angenommen, Sie haben einige Daten geändert. Vue aktualisiert das DOM basierend auf den Daten. Allerdings werden die DOM-Änderungen vom Browser noch nicht auf dem Bildschirm gerendert. Wenn Sie verwendet haben nextTick, wird Ihr Rückruf jetzt aufgerufen. Anschließend aktualisiert der Browser die Seite. Wenn Sie verwendet haben setTimeout, wird Ihr Rückruf erst jetzt angerufen.

Sie können dieses Verhalten visualisieren, indem Sie eine kleine Komponente wie die folgende erstellen:

<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>

Führen Sie Ihren lokalen Server aus. Sie sehen, dass die Nachricht Threeangezeigt wird.

Ersetzen Sie jetzt Ihre this.$nextTickdurchsetTimeout

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

Laden Sie den Browser neu. Sie werden sehen Two, bevor Sie sehen Three.

Überprüfen Sie diese Geige, um sie live zu sehen

Das liegt daran, dass Vue das DOM aktualisiert Twohat und dem Browser die Kontrolle gegeben hat. Browser angezeigt Two. Dann rief Ihr Rückruf. Vue hat das DOM auf aktualisiert Three. Was der Browser wieder anzeigt.

Mit nextTick. Vue udpierte das DOM zu Two. Rief deinen Rückruf an. Vue hat das DOM auf aktualisiert Three. Dann gab dem Browser die Kontrolle. Und der Browser wird angezeigt Three.

Hoffe es war klar.

Um zu verstehen, wie Vue dies implementiert, müssen Sie das Konzept der Ereignisschleife und der Mikrotasks verstehen .

Wenn Sie diese Konzepte gelöscht haben , überprüfen Sie den Quellcode auf nextTick .

Der Inhalt wurde von Adrià Fontcuberta übernommen

Vue-Dokumentation sagt:

Vue.nextTick ([Rückruf, Kontext])

Verschieben Sie den Rückruf, der nach dem nächsten DOM-Aktualisierungszyklus ausgeführt werden soll. Verwenden Sie es sofort, nachdem Sie einige Daten geändert haben, um auf das DOM-Update zu warten.

Hmm ..., wenn es sich zuerst einschüchternd anfühlt, mach dir keine Sorgen, ich werde versuchen, es so einfach wie möglich zu erklären. Aber zuerst sollten Sie zwei Dinge wissen:

1. Seine Verwendung ist ungewöhnlich. Wie eine dieser silbernen Zauberkarten. Ich habe mehrere VueApps geschrieben und bin ein- oder zweimal auf nextTick () gestoßen.

2. Es ist einfacher zu verstehen, wenn Sie einige echte Anwendungsfälle gesehen haben. Nachdem Sie auf die Idee gekommen sind, wird die Angst verschwinden und Sie haben ein handliches Werkzeug unter Ihrem Gürtel.

Dann lass uns loslegen.

$ NextTick verstehen

Wir sind Programmierer, nicht wahr? Wir werden unseren geliebten Divide and Conquer-Ansatz verwenden, um zu versuchen, die Beschreibung von .nextTick()Stück für Stück zu übersetzen . Es beginnt mit:

Verschieben Sie den Rückruf

Ok, jetzt wissen wir, dass es einen Rückruf akzeptiert. So sieht es aus:

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

Toll. Dieser Rückruf wird verschoben (so sagen Millenials verzögert), bis…

der nächste DOM-Aktualisierungszyklus.

In Ordnung. Wir wissen, dass Vue DOM-Updates asynchron durchführt . Es bietet eine Möglichkeit, diese Updates so lange „gespeichert“ zu halten, bis sie angewendet werden müssen. Es erstellt eine Warteschlange mit Updates und löscht diese bei Bedarf. Anschließend wird das DOM „gepatcht“ und auf die neueste Version aktualisiert.

Was?

Lassen Sie es mich noch einmal versuchen: Stellen Sie sich vor, Ihre Komponente macht etwas wirklich Wesentliches und Kluges, als würde this.potatoAmount = 3.Vue die Komponente (und damit das DOM) nicht automatisch neu rendern. Die erforderliche Änderung wird in die Warteschlange gestellt. Dann wird beim nächsten „Tick“ (wie bei einer Uhr) die Warteschlange geleert und die Aktualisierung angewendet. Tada!

In Ordnung! Wir wissen also, dass wir nextTick()eine Rückruffunktion übergeben können, die direkt ausgeführt wird, nachdem die Daten festgelegt und das DOM aktualisiert wurden.

Wie ich schon sagte ... nicht so oft. Der "Datenfluss" -Ansatz, der Vue, React und den anderen von Google antreibt, den ich nicht erwähne, macht ihn die meiste Zeit unnötig. Manchmal müssen wir jedoch warten, bis einige Elemente im DOM erscheinen / verschwinden / geändert werden. Dies ist der Zeitpunkt, an dem nextTick nützlich ist.

Verwenden Sie es sofort, nachdem Sie einige Daten geändert haben, um auf das DOM-Update zu warten.

Genau! Dies ist die letzte Definition, die uns Vue-Dokumente zur Verfügung gestellt haben. In unserem Rückruf wurde das DOM aktualisiert, damit wir mit der „aktuellsten“ Version interagieren können.

Beweise es

Okay okay. Wenn Sie sich die Konsole ansehen, werden Sie feststellen, dass der Wert unserer Daten nur innerhalb des Rückrufs von nextTick aktualisiert wird:

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>

Ein Anwendungsfall

Versuchen wir, einen nützlichen Anwendungsfall für zu definieren nextTick.

Stellen Sie sich vor, Sie müssen eine Aktion ausführen, wenn eine Komponente bereitgestellt wird. ABER! nicht nur die Komponente. Sie müssen auch warten, bis alle untergeordneten Elemente im DOM bereitgestellt und verfügbar sind. Verdammt! Unser montierter Hook garantiert nicht, dass der gesamte Komponentenbaum gerendert wird.

Wenn wir nur ein Tool hätten, um auf den nächsten DOM-Aktualisierungszyklus zu warten ...

Hahaa:

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

In einer Nussschale

Also: nextTickist eine bequeme Möglichkeit, eine Funktion auszuführen, nachdem die Daten festgelegt und das DOM aktualisiert wurden.

Sie müssen auf das DOM warten, vielleicht weil Sie eine Transformation durchführen müssen, oder Sie müssen warten, bis eine externe Bibliothek ihre Inhalte geladen hat? Verwenden Sie dann nextTick.

Einige Benutzer verwenden nextTick auch in ihren Komponententests, um sicherzustellen, dass die Daten aktualisiert wurden. Auf diese Weise können sie die „aktualisierte Version“ der Komponente testen.

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

Mach dir keine Sorgen. Beide sind (fast) gleich. Vue.nextTick()verweist auf die globale API-Methode, während vm.$nextTick()es sich um eine Instanzmethode handelt. Der einzige Unterschied besteht darin, dass vm.$nextTickkein Kontext als zweiter Parameter akzeptiert wird. Es ist immer gebunden this(auch als Instanz selbst bekannt).

Ein letztes Stück Coolness

Beachten Sie, dass nextTicka zurückgegeben wird Promise, damit wir async/awaitdas Beispiel vollständig abkühlen und verbessern können:

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

Mit Next Tick können Sie im Grunde genommen Code ausführen, nachdem der Vue die Komponente neu gerendert hat, nachdem Sie einige Änderungen an der reaktiven Eigenschaft (Daten) vorgenommen haben.

// 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.
})

Aus der Vue.js-Dokumentation:

Verschieben Sie den Rückruf, der nach dem nächsten DOM-Aktualisierungszyklus ausgeführt werden soll. Verwenden Sie es sofort, nachdem Sie einige Daten geändert haben, um auf das DOM-Update zu warten.

Lesen Sie hier mehr darüber .

Um Pranshats Antwort auf den Unterschied zwischen der Verwendung von nextTick und setTimeout deutlicher zu machen, habe ich seine Geige gegabelt: hier

mounted() {    
  this.one = "One";
 
  setTimeout(() => {
    this.two = "Two"
  }, 0);
  
  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

Sie können in der Geige sehen, dass bei Verwendung von setTimeOut die Anfangsdaten sehr kurz blinken, sobald die Komponente bereitgestellt wird, bevor die Änderung angepasst wird. Bei Verwendung von nextTick werden die Daten vor dem Rendern in den Browser entführt und geändert. Der Browser zeigt also die aktualisierten Daten an, ohne die alten zu kennen. Hoffe, das klärt die beiden Konzepte auf einen Schlag.