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

HTML-Tutorial, leicht zu erlernende HTML-Sprache (2)

Sprechen Sie über nextTick in Vue

HTML-Tutorial, leicht zu erlernende HTML-Sprache (2)

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Was ist em? Einführung und Konvertierungsmethode von em und px

Vue-pdf implementiert eine Online-Vorschau von PDF-Dateien

VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)

Ubuntu-Terminal, mehrere Fenster, geteilter Bildschirm, Terminator

Detaillierte Erklärung zur Verwendung von Vue-Mixin

jQuery-Plugin zur Implementierung des sekundären Akkordeonmenüs

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln

So bringen Sie Ihren Browser dazu, mit JavaScript zu sprechen

Artikel empfehlen

Zwei Möglichkeiten zum Implementieren einer HTML-Seite: Klicken Sie auf „Datei herunterladen“

Interner Ereignisrückruf der Webkomponentenkomponente und Problempunktanalyse

Detaillierte Erklärung des Linux-Netstat-Befehls

Implementierungscode zum Hinzufügen eines Schrägstrichs zum Vue-Elementheaders

Zusammenfassung der grundlegenden Verwendung von CSS3 @media

Methode zum Knacken der Registrierung der FlashFXP-FTP-Clientsoftware

So fügen Sie Tastenkombinationen in Xshell hinzu

Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL

Vor- und Nachteile von React Hooks

Der Unterschied zwischen der Speicherung von Zeichen mit voller Breite und Zeichen mit halber Breite in MySQL

Die Verwendung von Textbereichen in HTML und häufige Probleme und Fallanalyse

So verwenden Sie CocosCreator zum Erstellen eines Schießspiels

Einige Details zu Semikolons in JavaScript

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen