Sprechen Sie über nextTick in Vue
|
Wenn sich die Daten ändern, wird die DOM-Ansicht nicht sofort aktualisiert. Wenn wir versuchen, einen Knoten oder seinen Wert unmittelbar nach der Änderung abzurufen, ist das Ergebnis wahrscheinlich undefiniert. Dies liegt daran, dass Vue Reaktionsfähigkeit nicht implementiert, weil sich das DOM unmittelbar nach der Datenänderung ändert, sondern weil es das DOM gemäß einer bestimmten Strategie aktualisiert. Schauen wir uns eine kleine Demo an: App.vue
<Vorlage>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Nachricht ändern</button>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "App",
Daten(){
zurückkehren {
msg:"Hallo Vue",
msg1: '',
}
},
Methoden:{
Nachricht ändern(){
this.msg = 'Hallo Welt';
dies.msg1=dies.$refs.message.innerHTML;
console.log("Vor dem Aktualisieren des DOM: "+this.msg1)
}
}
}
</Skript>
<Stil>
#app {
Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
-webkit-font-smoothing: Kantenglättung;
-moz-osx-font-smoothing: Graustufen;
Textausrichtung: zentriert;
Farbe: #2c3e50;
Rand oben: 60px;
}
</Stil>
Durch Ausführen des Codes können wir sehen, dass der Wert von this.$refs.message.innerHTML immer noch den vorherigen Anfangswert speichert, wenn wir in der Methode this.$nextTick keine DOM-Operationen ausführen. Ändern Sie den Code: App.vue
<Vorlage>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Nachricht ändern</button>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "App",
Daten(){
zurückkehren {
msg:"Hallo Vue",
msg1: '',
}
},
Methoden:{
Nachricht ändern(){
this.msg = 'Hallo Welt';
// dies.msg1=dies.$refs.message.innerHTML;
// console.log("Vor dem Aktualisieren des DOM: "+this.msg1)
dies.$nextTick(()=>{
dies.msg1=dies.$refs.message.innerHTML;
console.log("Nach dem Aktualisieren des DOM: "+this.msg1)
})
}
}
}
</Skript>
<Stil>
#app {
Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
-webkit-font-smoothing: Kantenglättung;
-moz-osx-font-smoothing: Graustufen;
Textausrichtung: zentriert;
Farbe: #2c3e50;
Rand oben: 60px;
}
</Stil>
Nachdem wir den Code geändert haben, können wir feststellen, dass es einfach ist, den aktualisierten Wert mit this.$nextTick zu erhalten, genau wie auf der offiziellen Website erklärt: Der verzögerte Rückruf wird ausgeführt, nachdem der nächste DOM-Aktualisierungszyklus endet. Verwenden Sie diese Methode unmittelbar nach der Änderung der Daten, um das aktualisierte DOM zu erhalten. Lassen Sie uns den Code ändern und vergleichen: App.vue
<Vorlage>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Nachricht ändern</button>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "App",
Daten(){
zurückkehren {
msg:"Hallo Vue",
msg1: '',
}
},
Methoden:{
Nachricht ändern(){
this.msg = 'Hallo Welt';
dies.msg1=dies.$refs.message.innerHTML;
console.log("Vor dem Aktualisieren des DOM: "+this.msg1)
dies.$nextTick(()=>{
dies.msg1=dies.$refs.message.innerHTML;
console.log("Nach dem Aktualisieren des DOM: "+this.msg1)
})
}
}
}
</Skript>
<Stil>
#app {
Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
-webkit-font-smoothing: Kantenglättung;
-moz-osx-font-smoothing: Graustufen;
Textausrichtung: zentriert;
Farbe: #2c3e50;
Rand oben: 60px;
}
</Stil>
Nachdem wir den Code geändert haben, können wir nun leicht die Rolle von this.$nextTick(callback) erkennen. callback ist die Rückruffunktion, die wir zum Bedienen des DOM verwenden möchten. Anwendungsszenarien:
Da DOM-Updates asynchron sind, bestimmt beispielsweise die v-if-Direktive das Hinzufügen und Löschen von DOM-Elementen. Wenn wir in der Methode Variablen Werte zuweisen und this.$nextTick() nicht verwenden, erhalten wir wahrscheinlich den Anfangswert. Wenn wir den aktualisierten Wert erhalten möchten, müssen wir die Methode this.$nextTick() verwenden. Oben finden Sie den detaillierten Inhalt von nextTick in Vue. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat
Artikel empfehlen
Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung
1. Ich habe vor kurzem eine neue Version von Ubun...
Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite
Ein Problem, auf das Frontend-Entwickler häufig s...
So ziehen Sie das Docker-Image herunter, um die Version anzuzeigen
Um die Version und das Tag des Bildes anzuzeigen,...
HTML-Formular-Tag-Tutorial (5): Textfeld-Tag
<br />Mit diesem Tag können Sie ein mehrzeil...
Detaillierte Erläuterung des CentOS 6.6-Quellcodes und der Installation des MySQL 5.7.18-Tutorials
1. Benutzer und Gruppen hinzufügen 1. MySQL-Benut...
Der Browser der Betaversion IE9 unterstützt HTML5/CSS3
Manche Leute sagen, dass IE9 die zweite Revolutio...
Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments
1. Einführung in KVM Die Abkürzung für Kernel-bas...
So ändern Sie schnell die Tabellenstruktur einer MySQL-Tabelle
Tabellenstruktur einer MySQL-Tabelle schnell ände...
js erkennt Schlüsselwörter im Titel und in der Beschreibung und ersetzt sie oder springt zu anderen Seiten, wenn sie gefunden werden
Stichwörter Allgemein Der Titel darf keine Wörter...
Beispiel für die CSS3-Clear-Float-Methode
1. Zweck Durch diesen Artikel kann jeder die Prin...
So teilen und führen Sie mehrere Werte in einem einzigen Feld in MySQL zusammen
Mehrere Werte kombiniert anzeigen Nun haben wir d...
MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial
In diesem Dokument werden die Installations- und ...
Vue kapselt die öffentliche Funktionsmethode zum Exportieren von Excel-Daten
vue+element UI kapselt eine öffentliche Funktion ...
Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden
Ein einfaches MySQL-Vollsicherungsskript, das die...
Galeriefunktion durch natives Js implementiert
Inhaltsverzeichnis Der erste Der Zweite Native Js...