So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Vorwort

Vor kurzem bin ich auf ein interessantes Problem gestoßen. Wie kann ich die Ansicht synchron aktualisieren, nachdem sich die Daten in Vue geändert haben? Ich habe danach gesucht, aber keine Lösung für das Problem gefunden. Ich konnte nur eine Lösung im Quellcode finden.

Grund

Wir alle wissen, dass die Ansicht nach der Änderung der Daten in Vue nicht synchron aktualisiert wird.

Nachdem die Vue-Instanz initialisiert wurde, werden die Daten auf ein responsives Objekt gesetzt. Wenn wir this.xxx = 1 ausführen, wird der Setter dieses responsiven Objekts ausgelöst. Im Setter wird ein Update ausgelöst, um alle Abonnenten zu benachrichtigen, die xxx abonniert haben. Dieses Trigger-Update ist jedoch nicht synchron. Es fügt alle Beobachter einer Warteschlange hinzu und aktualisiert die Ansicht nach dem nächsten Tick.

Aus diesem Grund kann Vue die Ansicht nicht synchron aktualisieren.

Problemumgehung

Wenn Sie die Ursache kennen, können Sie immer eine Lösung finden.

Da die Ansicht bei nextTick aktualisiert wird, muss zu diesem Zeitpunkt eine Methode zum Aktualisieren der Ansicht ausgeführt werden. Wenn wir diese Methode bei einer Datenänderung manuell ausführen, können wir den Zweck der synchronen Aktualisierung der Ansicht erreichen.

Nachdem wir den Quellcode verstanden haben, können wir feststellen, dass die ausgeführte Methode watcher.run() ist. Die Frage ist also, wie man diese Methode erhält.

Wenn Sie dies schnell verstehen möchten, empfiehlt es sich, Vue.js Technology Unveiled zu lesen.

Lassen Sie uns dies in der Konsole drucken

Die Run-Methode befindet sich im Prototyp des _watcher-Objekts, sodass das Problem gelöst ist.

 dies.xxx = 1;
 dies._watcher.run()

Führen Sie den obigen Code aus und aktualisieren Sie die Ansicht nach der Aktualisierung der Daten manuell, um den Synchronisierungseffekt zu erzielen.

Eine bessere Lösung

Es wäre mühsam, this._watcher.run() jedes Mal hinzuzufügen, wenn Sie die Ansicht synchron aktualisieren möchten. Daher habe ich ein Plug-In geschrieben, das die synchrone Aktualisierung der Ansicht nach this.xxx = 1 unterstützt.

Das Prinzip dieses Plug-Ins ist sehr einfach. Es fügt den Komponentenoptionen eine Option syncData hinzu, die data ähnelt. Dann fügen Sie sie in data ein. Wenn der Create-Hook aufgerufen wird, wird dieser Teil von data erneut gekapert. Wenn sich die Daten in syncData ändern, wird automatisch _watch.run() ausgelöst, wodurch die Ansicht synchron aktualisiert wird.

Plugin-Adresse: GitHub-Adresse

Nachtrag

Ehrlich gesagt halte ich dieses Plugin für nutzlos. Theoretisch können alle Probleme, die dieses Plugin lösen kann, durch $nextTick gelöst werden.

Dies ist das Ende dieses Artikels zum Synchronisieren von Ansichten nach Datenänderungen in Vue. Weitere relevante Inhalte zum Aktualisieren der Vue-Ansichtssynchronisierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!