Vue-Responsive-Data-Prinzip und der Unterschied zwischen Vue.set und Vue.$set

Vue ist ein beliebtes Entwicklungsframework im aktuellen Front-End-Bereich. Einer seiner Kernmechanismen, der Ansichtsaktualisierungen durch Datenänderung auslösen kann, sind responsive Daten. Dieser Artikel befasst sich mit den Prinzipien der reaktiven Daten von Vue und untersucht die Unterschiede zwischen Vue.set und Vue.$set.

1. Vue-Responsive-Data-Prinzip

Vue kapert zunächst die Datenquelle. Um die Datenquelle zu definieren, müssen nur die folgenden drei Bedingungen erfüllt sein: Das Objekt ist nicht leer, das Objekt ist kein eingefrorenes oder versiegeltes Objekt. und das Objekt ist selbst keine Vue-Instanz. Wenn das erforderliche Objekt die Bedingungen erfüllt, fügt Vue dem Objekt eine Observe-Instanz hinzu. Wenn der Eigenschaftswert ein Objekt ist, ist die Dep-Instanz die entsprechende Dep-Instanz. Fügen Sie für jeden Wert eine Dep-Instanz hinzu. Dies ermöglicht die Bindung von Eigenschaften.

Beim Ändern der Daten in der Vue-Instanz fängt Vue die Lese- und Schreibvorgänge der Daten über Getter und Setter ab und löst dadurch die Aktualisierung des Attributwerts aus. Der Setter-Vorgang benachrichtigt die Dep-Instanz, zu der das Attribut gehört Führen Sie Benachrichtigungsaktualisierungen durch und lösen Sie so Ansichtsaktualisierungen aus. So implementiert Vue responsive Daten.

2. Der Unterschied zwischen Vue.set und Vue.$set

In Vue ändern wir häufig die Daten in Daten und binden sie über das V-Modell an die Ansicht, sodass Vue beim Ändern der Daten die Ansicht automatisch aktualisieren kann . Beim Ändern von Objektdaten müssen wir jedoch die von Vue bereitgestellten Methoden Vue.set oder Vue.$set verwenden, um reaktionsfähige Datenaktualisierungen zu erreichen.

Die Verwendung von Vue.set und Vue.$set ist konsistent. Das Ziel von Vue.set(target, key, value) ist das Objekt, das Sie ändern möchten, key ist das Objekt als Attributname und value ist der Attributwert. Bei Verwendung von Vue.set fügt Vue dem Objekt ein neues Attribut hinzu, das den Namen „key“ trägt und dessen Wert „value“ ist.

Vue.$set(target, key, value) wird auch verwendet, um den Attributwert eines Objekts zu ändern, aber der Unterschied zwischen Vue.$set und Vue.set besteht darin, dass Vue.$set bestimmt, ob das Objekt reagiert . Wenn es nicht reagiert, konvertiert Vue.$set das Objekt in ein reaktionsfähiges Objekt. Dadurch wird sichergestellt, dass das Objekt Ansichtsaktualisierungen normal auslösen kann.

Es ist zu beachten, dass Vue die Änderung dieser Daten nicht erkennt und keine Ansichtsaktualisierung auslöst, wenn wir die Objektdaten ändern und obj.property = value direkt zum Ändern verwenden. Wenn Sie Daten eines Objekttyps ändern, verwenden Sie daher unbedingt die Methode Vue.set oder Vue.$set.

Das obige ist der detaillierte Inhalt vonVue-Responsive-Data-Prinzip und der Unterschied zwischen Vue.set und Vue.$set. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!