Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien

Zweck

Verstehen Sie die Rolle von nextTick und mehrere einfache Anwendungsszenarien

Text

Was ist seine Funktion?

Der verzögerte Rückruf wird ausgeführt, nachdem der nächste DOM-Aktualisierungszyklus abgeschlossen ist. Verwenden Sie diese Methode unmittelbar nach der Datenänderung, um das aktualisierte DOM zu erhalten.

Ich denke, jeder kennt oder versteht den Rendering-Prozess von Vue. Vue rendert nach der Überwachung von Datenänderungen erneut und arbeitet mit VDOM zusammen, um das reale DOM zu aktualisieren. Der Auslösezeitpunkt von nextTick liegt nach dem ersten erneuten Rendering nach dem Aufruf der Methode.

Wie benutzt man?

Es gibt zwei Möglichkeiten, es zu verwenden: Eine besteht darin, einen Rückruf zu übergeben, und die andere ist Promise. Die offiziellen Verwendungsbeispiele lauten wie folgt:

// Daten ändern vm.msg = 'Hallo'
// DOM wurde noch nicht aktualisiert Vue.nextTick(function () {
 // DOM aktualisiert})

// Als Promise verwenden (neu seit 2.1.0, Einzelheiten finden Sie in den folgenden Tipps)
Vue.nextTick()
 .dann(Funktion () {
 // DOM aktualisiert})

Wenn es sich um eine SPA (Single File Component) handelt, kann es so aussehen

<Vorlage>
 <div id="test">{{msg}}</div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Daten() {
 zurückkehren {
  "msg": "Hallo Welt!"
 }
 },
 Methode() {
 this.msg = "Hallo Welt!";
 dies.$nextTick(() => {
  console.log('DOM aktualisiert:', document.getElementById('test').innerHTML)
 });
 }
}
</Skript>

Was sind die Anwendungsszenarien?

Bei manchen Methoden muss vor der Ausführung gewartet werden, bis das Rendering abgeschlossen ist.

Bindung initialisieren oder DOM manipulieren

Wenn Sie beispielsweise in den erstellten und bereitgestellten Rückrufen das gerenderte DOM bedienen müssen, müssen Sie die entsprechende Logik in nextTick ausführen. Dies ist sehr nützlich, wenn Sie einige alte Bibliotheken verwenden müssen, die an das DOM gebunden werden müssen.

Wenn Sie beispielsweise UEditor laden, können Sie so spielen

<Vorlage>
<script id="container" name="content" type="text/plain"> Schreiben Sie hier Ihren Initialisierungsinhalt</script>
</Vorlage>
<Skript>
Standard exportieren {
 montiert() {
  dies.nextTick(() => {
   var ue = UE.getEditor('container');
  });
 }
}

Elementbreite ermitteln

Es gibt zwei Möglichkeiten, die Elementbreite in Vue zu ermitteln. Die erste ist über $refs[ref名稱].style.width und die zweite ist, die traditionelle DOM-Operationsmethode zu verwenden, um sie zu ermitteln. Um jedoch die genaue Elementbreite zu erhalten, müssen beide Methoden nach Abschluss des DOM-Renderings ausgeführt werden.

<Vorlage>
<p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">Breite des p-Elements abrufen</button>
</Vorlage>
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
  Nachricht: "Hallo Welt!",
  zeig mir: falsch,
 },
 Methoden: {
  getMeineBreite() {
  dies.showMe = wahr;
  //this.message = this.refs.myWidth.offsetWidth; //TypeError: this.refs.myWidth ist nicht definiert 
  dies.nextTick(()=>{
  //Ausführen, nachdem das DOM-Element aktualisiert wurde und die Attribute des p-Elements abgerufen werden können this.message = this.refs.myWidth.offsetWidth; })
  }
 }
 }
}
</Skript>

Zusammenfassen

Obwohl die Designphilosophie von Vue nicht empfiehlt, den DOM direkt zu manipulieren, treten in einigen Szenarien einige besonders verwirrende Probleme auf. Nachdem Sie die Rendering-Logik von Vue verstanden haben, können Sie diese mit nextTick() lösen.

Oben finden Sie Einzelheiten zur Verwendung von nextTick in Vue. Weitere Informationen zur Verwendung von nextTick in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!