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:

Wenn Sie DOM-Operationen in der Lifecycle-Hook-Funktion „created()“ von Vue ausführen, achten Sie darauf, die DOM-Operationen in this.$nextTick(); einzufügen.
Denn wenn die Funktion „Create Hook“ ausgelöst wird, wird das DOM nicht gerendert. Wenn das DOM nicht gerendert wird, sind DOM-Operationen zweifellos sinnlos.
Wenn wir daher DOM-Operationen in „create“ ausführen, müssen wir die DOM-Operationen in this.$nextTick(); einfügen.
Das Gegenteil ist das Mounten, da beim Auslösen des Mountens das Mounten und Rendern des DOM abgeschlossen ist und daher bei der Durchführung von DOM-Operationen im Mounten kein Problem auftritt.

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 des Prinzips von Vue nextTick
Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien
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

<<: Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat

>>: Installieren Sie den Quellcode der MySQL-Datenbank 5.6 unter Linux und ändern Sie das Anmeldebenutzerkennwort

Detaillierte Erklärung der Lösung für das beim Start hängengebliebene Ubuntu-Dualsystem

Sprechen Sie über nextTick in Vue

Detaillierte Erklärung der Lösung für das beim Start hängengebliebene Ubuntu-Dualsystem

So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei

Docker implementiert hostübergreifende Containerkommunikation basierend auf MacVLAN

Sogar ein Anfänger kann den Unterschied zwischen typeof und instanceof in js verstehen

Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten

Lassen Sie uns ausführlich über die LIMIT-Anweisung in MySQL sprechen

Detaillierte Erklärung der atomaren DDL-Syntax von MySQL 8.0

MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse

Beispielanalyse des asynchronen Verhaltens von Popup-Fenstern auf Front-End-Webseiten von Vue.js

Wie installiert und verbindet man Navicat in MySQL 8.0.20 und worauf muss man achten?

Artikel empfehlen

MySQL-Backup-Tabellenvorgang basierend auf Java

Verwendung der Linux Dynamic Link Library

Implementierung von 2D- und 3D-Transformationen in CSS3

So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein

So erstellen Webdesigner Bilder für Retina-Displays

Nodejs konvertiert JSON-String in JSON-Objekt-Fehlerlösung

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Windows)

Detaillierte Erklärung mehrerer Möglichkeiten zum Erstellen eines oberen linken Dreiecks in CSS

Beheben Sie das Problem, dass das Elementbearbeitungsformular el-radio nach dem Echo nicht ausgewählt werden kann

Erstellen Sie einen virtuellen Nginx-Host basierend auf Domänenname, Port und IP

Beispiel zum Starten eines Containers mit mehreren Netzwerkschnittstellen mithilfe von Docker

Detailliertes Beispiel zur Installation eines FastDfs-Dateiservers mit Docker Compose

Detaillierte Erläuterung der Docker Volume-Berechtigungsverwaltung

Detaillierte Erklärung von react setState

Master-Slave-Synchronisationskonfiguration und Lese-/Schreibtrennung der MySQL-Datenbank