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:
Seine Verwendung ist ungewöhnlich. Wie eine dieser silbernen Zauberkarten. Ich habe mehrere VueApps geschrieben und bin ein- oder zweimal auf nextTick () gestoßen.
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'
}
nextTick. Hier dokumentiert .