In Vue wird nexttick() verwendet, um den Aufruf der Rückruffunktion nach dem nächsten DOM-Aktualisierungszyklus zu verzögern. Sie können den verzögerten Rückruf nach dem Ende des nächsten DOM-Aktualisierungszyklus ausführen und ihn verwenden, um das aktualisierte DOM nach der Änderung der Daten abzurufen. Die Syntax lautet „Vue .nextTick([callback,context])“.
Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.
Was ist die Verwendung von nexttick in Vue?
Definition: Führen Sie einen verzögerten Rückruf aus, nachdem der nächste DOM-Aktualisierungszyklus endet. Verwenden Sie diese Methode unmittelbar nach der Änderung der Daten, um das aktualisierte DOM zu erhalten.
Also wurde diese Vue-Methode zum Abrufen des aktualisierten DOM abgeleitet. Daher sollte die in der Rückruffunktion Vue.nextTick() platzierte Ausführung der JS-Code sein, der das DOM betreibt. Verständnis: nextTick() verzögert die Rückruffunktion, bis das Dom das nächste Mal die Daten aktualisiert. Wenn die Daten im DOM aktualisiert und gerendert werden, wird diese Funktion automatisch ausgeführt Gemäß einer bestimmten Strategie wird das DOM aktualisiert. $nextTick soll einen verzögerten Rückruf ausführen, nachdem der nächste DOM-Aktualisierungszyklus endet. Wenn Sie $nextTick nach dem Ändern der Daten verwenden, können Sie das aktualisierte DOM im Rückruf erhalten.
Wann müssen Sie Vue.nextTick() verwenden? ?
1. Die DOM-Operation, die von der Hook-Funktion „created()“ des Vue-Lebenszyklus ausgeführt wird, muss in der Callback-Funktion von „Vue.nextTick()“ platziert werden. Der Grund dafür ist, dass das DOM überhaupt nicht gerendert wird, wenn die Funktion „created(“ ) Hook-Funktion ausgeführt wird. Zu diesem Zeitpunkt sind DOM-Operationen zwecklos, daher muss der js-Code für DOM-Operationen in die Rückruffunktion von Vue.nextTick() eingefügt werden. Dies entspricht der gemounteten Hook-Funktion, da die gesamte DOM-Montage abgeschlossen ist, wenn diese Hook-Funktion ausgeführt wird.
<template>
<div class="hello">
<div>
<button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值
}
}
}
</script>Nach dem Login kopieren
2. Wenn Sie etwas basierend auf dem neuen DOM tun möchten, nachdem Sie die Daten des DOM-Elements im Projekt geändert haben, müssen Sie eine Reihe von js-Operationen für das neue DOM in die Rückruffunktion von Vue.nextTick einfügen. ); allgemeines Verständnis Ja: Nach dem Ändern der Daten müssen Sie sie verwenden, wenn Sie js verwenden möchten, um die neue Ansicht sofort zu bedienen
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
that.$nextTick(function(){
console.log(that.$refs.aa.innerText); //输出：修改后的值
});
}
}Nach dem Login kopieren
Die korrekte Verwendung ist: Nachdem Vue die Dom-Elementstruktur geändert hat, verwenden Sie vue.$nextTick ()-Methode zum Implementieren einer verzögerten Ausführung nach der Aktualisierung der Dom-Daten Folgecode
created(){
let that=this;
that.$nextTick(function(){ //不使用this.$nextTick()方法会报错
that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素
});
},Nach dem Login kopieren
3 Wenn Sie ein Plug-in eines Drittanbieters verwenden, wenn einige von vue generierte Dom-Dynamik Wenn Sie sich ändern, wird diese Methode ebenfalls verwendet. Zu diesem Zeitpunkt müssen Sie die Rückruffunktion von $nextTick verwenden. Führen Sie die Methode aus, um das Plug-In erneut anzuwenden.
Vue.nextTick(callback) Verwendungsprinzip:
Der Grund dafür ist, dass Vue Dom-Aktualisierungen asynchron durchführt. Sobald Datenänderungen beobachtet werden, öffnet Vue eine Warteschlange und beobachtet sie dann in derselben Ereignisschleife wird in diese Warteschlange verschoben. Wenn dieser Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Durch dieses Pufferverhalten können unnötige Berechnungen und DOm-Operationen, die durch doppelte Daten verursacht werden, wirksam vermieden werden. In der nächsten Ereignisschleife löscht Vue die Warteschlange und führt die erforderlichen DOM-Aktualisierungen durch.
Wenn Sie vm.someData = 'new value' festlegen, wird das DOM nicht sofort aktualisiert. Stattdessen werden die erforderlichen DOM-Aktualisierungen durchgeführt, wenn die asynchrone Warteschlange gelöscht wird, d. h. wenn die Aktualisierung zu Beginn durchgeführt wird die nächste Ereignisschleife. Wenn Sie zu diesem Zeitpunkt etwas auf der Grundlage des aktualisierten DOM-Status tun möchten, treten Probleme auf. . Um zu warten, bis Vue die Aktualisierung des DOM nach den Datenänderungen abgeschlossen hat, können Sie Vue.nextTick(callback) unmittelbar nach den Datenänderungen verwenden. Diese Rückruffunktion wird aufgerufen, nachdem die DOM-Aktualisierung abgeschlossen ist.
【Verwandte Empfehlung: „
vue.js Tutorial
“】
Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Nexttick in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
