Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien

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!

Das könnte Sie auch interessieren:
  • Analyse des Prinzips von Vue nextTick
  • Eine kurze Analyse von nextTick in vue
  • Eine umfassende Analyse von $nextTick in Vue
  • VUE aktualisiert DOM asynchron – Verwendung von $nextTick zum Lösen von DOM-Ansichtsproblemen
  • Vue.js-Prinzipanalyse: Detaillierte Erklärung der nextTick-Implementierung
  • Funktion und Verwendung von this.$nextTick in Vue
  • Detaillierte Erklärung der Verwendung von $nextTick und $forceUpdate in Vue
  • Detaillierte Untersuchung der Verwendung und Prinzipien von Vue nextTick
  • NextTick-Anwendungsbeispiel in Vue
  • Vue-Quellcode nextTick – Verwendung und Prinzipanalyse
  • Erfahren Sie in einem Artikel mehr über nextTick in Vue
  • Implementierung einer Browser-Ereignisschleife und von Vue NextTicket
  • Erklärung zur Verwendung von $nextTick in Vue
  • Verstehen Sie die Verwendung von nextTick in Vue anhand des Quellcodes
  • Vue2.0$nextTick wartet auf die Methode der Rückruffunktion, nachdem die Datenwiedergabe abgeschlossen ist
  • Detaillierte Erklärung der Unterschiede zwischen Vue-Direktiven und $nextTick bei der Manipulation von DOM
  • Tiefgreifendes Verständnis des Vue nextTick-Mechanismus
  • Sprechen Sie über nextTick in Vue

<<:  Centos7-Startvorgang und Nginx-Startkonfiguration in Systemd

>>:  Lösung für den Fehler 1045, wenn Navicat eine Verbindung zu MySQL herstellt

Artikel empfehlen

Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung

In unserem aktuellen Projekt müssen wir die Googl...

So verwenden Sie „union all“ in MySQL, um die Union-Sortierung zu erhalten

Manchmal kommt es in einem Projekt aus irreversib...

JS implementiert WeChats "Shit Bombing"-Funktion

Hallo zusammen, ich bin Qiufeng. Vor Kurzem hat W...

Erstellen eines FastDFS-Dateisystems in Docker (Tutorial mit mehreren Images)

Inhaltsverzeichnis Über FastDFS 1. Suche nach Bil...

Grafisches Tutorial zur Installation der komprimierten Version von MySQL 8.0.15

In diesem Artikel wird die Installationsmethode d...

Einführung in die Nginx-Protokollverwaltung

Nginx-Protokollbeschreibung Über Zugriffsprotokol...

Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes

Inhaltsverzeichnis 1. DHCP-Dienst (Dynamic Host C...

Detailliertes Tutorial zur Installation von ElasticSearch 6.4.1 auf CentOS7

1. Laden Sie das ElasticSearch 6.4.1-Installation...

So wählen Sie die Transaktionsisolationsebene in einem MySQL-Projekt

Einführung Beginnen wir mit unserem Inhalt. Ich g...

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher

1. Herunterladen 1. Download-Adresse der offiziel...

MySQL-Sortierung – Chinesische Details und Beispiele

Detaillierte Erklärung zur MySQL-Sortierung chine...

Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an

Methode 1: Verwenden Sie zur Lösung die CSS-Überl...