Was soll ich tun, wenn Vue die aktuelle Seite nicht aktualisiert?

Die Lösungen dafür, dass Vue die aktuelle Seite nicht aktualisiert, sind: 1. Definieren Sie einen Schwellenwert in Daten, Code wie „this.show = false;setTimeout(() => {this.show = true},0)“; 2. Nachdem die Daten verarbeitet wurden, verwenden Sie „this.$froceUpdate()“, um die Aktualisierung zu erzwingen. 3. Führen Sie nach Abschluss der Datenverarbeitung den Datenrücksetzvorgang durch. 4. Verwenden Sie die globale Methode „this.$set“, um die Daten zu aktualisieren , usw.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Was soll ich tun, wenn Vue die aktuelle Seite nicht aktualisiert?

Die Datenaktualisierungsseite im Vue-Projekt kann in viele Typen unterteilt werden. Der Grund dafür ist, dass Versionen unter vue3.0 keine Änderungen an Objekten (einschließlich Arrays und Objekten) überwachen können Der Aktualisierungsmechanismus von Vue kann Datenänderungen nicht erkennen, wenn sie sich ändern. Daher müssen wir den Zweck der Seitenaktualisierung durch verschiedene Prozesse während der tatsächlichen Anwendung erreichen.

1. Dies ist eine einfache und grobe Lösung, die darin besteht, die Seite nach Abschluss der Datenaktualisierung neu anzuordnen. Sie sollte jedoch nicht verwendet werden Die spezifische Implementierungsmethode lautet wie folgt:

Definieren Sie einen Schwellenwert in den Daten, z. B. show, initial true;

this.show = false;
setTimeout(() => {
 
  this.show = true
 
},0)

2. Nachdem die Daten verarbeitet wurden, verwenden Sie dies.$froceUpdate ( ) um die Aktualisierung zu erzwingen;

3. Führen Sie den Datenrücksetzvorgang nach Abschluss der Datenverarbeitung durch. Beachten Sie jedoch, dass diese Methode nur für Objekte gültig ist (persönliches Testarray ist ungültig. Wenn Freunde es erhalten können, hinterlassen Sie bitte eine Nachricht, lass es mich wissen. Verehre es, hehe), und diese Methode eignet sich nicht für Datenquellen mit Schlüsselwerten im Objekt, die Referenztypen sind (für diese Methode denke ich persönlich, dass die Vorlage zum Anzeigen von Referenztypdaten sein kann gekapselt in einer separaten Komponente und dann in dieser Komponente. Um Daten zu aktualisieren, ist die Überwachung von Datenänderungen natürlich unerlässlich. Diese Methode wurde nicht getestet, daher sollte sie in Ordnung sein)

let temp = this.data;
this.data = null;
this.data = temp

4 .$set globale Methode zum Aktualisieren von Daten; Hier möchten wir über den Datenbindungsmechanismus von vue sprechen. Wenn eine Seite erstellt wird, wird die HTML-Vorlage nur an die Daten gebunden, die bereits in den Daten vorhanden sind. Wenn wir Daten anhängen, nachdem die Seite erstellt wurde, gibt es Situationen, in denen die Daten aktualisiert werden, die Seite jedoch nicht aktualisiert wird. This.$set (Datenquelle, Schlüssel der anzuhängenden Daten/Index in den Quelldaten, neu data) ist die von Vue offiziell bereitgestellte Methode zum Anhängen von Daten und ermöglicht das Aktualisieren der Seite.

5. Bei Array-Daten sind die häufigsten Gründe, warum die Seite nach dem Ändern der Daten nicht aktualisiert wird:

Ändern der Array-Elemente über den Array-Index

Ändern der Array-Länge

• Dann beim Ändern In den Array-Daten sollten wir push(), pop(), shift(), unshift(), splice(), sort(), reverse() und andere native Methoden verwenden, um Daten zu manipulieren, da Vue das Array direkt erkennen kann Die durch diese Methoden erzeugten Daten ändern sich.
• 6. Der grundlegendste Grund, warum die Daten nicht aktualisiert werden, liegt darin, dass Vue davon ausgeht, dass die Vorlagenstruktur nicht aktualisiert wurde, sodass kein neues virtuelles DOM generiert wird, sodass wir dem DOM einen Schlüsselwert hinzufügen können, der benötigt wird aktualisiert werden, die sich ändern, wenn der Vorgang endet, sodass er aktualisiert wird (dies ist eine neue Fähigkeit, die ich kürzlich gelernt habe, ich werde weitere hinzufügen).
  Empfohlenes Lernen: „
Vue-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Vue die aktuelle Seite nicht aktualisiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!