Ausführliche Erläuterung der bidirektionalen Bindung von Vue-Daten

Die bidirektionale Bindung von Vue-Daten wird durch Datenhijacking in Kombination mit dem Herausgeber-Abonnenten-Modell erreicht. Dieser Artikel teilt Ihnen hauptsächlich die bidirektionale Bindung von Vue-Daten mit. Schauen wir uns zunächst den Effekt an, in der Hoffnung, allen zu helfen.

Zwei-Wege-Bindung bedeutet, dass Änderungen in der Ansicht in den Daten widergespiegelt werden können und Änderungen in den Daten auch in der Ansicht widergespiegelt werden können. Wie in der folgenden Abbildung dargestellt:

Der entscheidende Punkt ist, wie die Daten die Ansicht aktualisieren, da die Ansicht die Daten durch Ereignisüberwachung aktualisiert. Beispielsweise kann das Eingabe-Tag das „Eingabe“-Ereignis überwachen . Daher konzentrieren wir uns auf die Analyse, wie die Ansicht aktualisiert wird, wenn sich die Daten ändern.

Der Schwerpunkt der Datenaktualisierungsansicht liegt darauf, herauszufinden, ob sich die Daten geändert haben. Solange Sie wissen, dass sich die Daten geändert haben, ist alles, was folgt, einfach zu handhaben. Wir können Object.defineProperty() verwenden, um Datenänderungen zu überwachen. Object.defineProperty()Akzeptiert drei Parameter: Der erste ist das Zielobjekt, also das Objekt, zu dem Sie dieses Attribut hinzufügen möchten, der zweite ist der Attributname und der dritte ist ein Deskriptorobjekt.
Wenn das Attribut ein Datenattribut ist, enthält das Deskriptorobjekt vier Attribute: konfigurierbar (kann es mit dem Löschoperator gelöscht werden), aufzählbar (kann das Attribut durch For-In durchlaufen werden), beschreibbar (kann das Attribut sein). geändert) und Wert (Attributwert), die ersten drei sind standardmäßig auf „false“ eingestellt. Wenn es sich bei der Eigenschaft um eine Zugriffseigenschaft handelt, enthält das Deskriptorobjekt vier Eigenschaften: konfigurierbar (kann mit dem Löschoperator gelöscht werden), aufzählbar (kann mit for-in durchlaufen werden), get (wird beim Lesen der Eigenschaft aufgerufen) (Funktion) und set (die Funktion, die beim Schreiben einer Eigenschaft aufgerufen wird), get und set standardmäßig auf undefiniert. Daher können wir die Daten als Accessor-Eigenschaft festlegen, sodass bei einer Änderung der Daten die Get- und Set-Methoden ausgelöst werden. Wir können diese beiden Funktionen verwenden, um die Ansicht zu aktualisieren.

Implementierungsprozess:

Wir wissen bereits, dass wir zur Implementierung der bidirektionalen Datenbindung zunächst die Daten kapern und überwachen müssen. Daher müssen wir einen Beobachter einrichten, um alle Eigenschaften zu überwachen. Wenn sich das Attribut ändert, müssen Sie dem Abonnenten-Watcher mitteilen, ob es aktualisiert werden muss. Da es viele Abonnenten gibt, benötigen wir eine Nachrichtenabonnenten-Abteilung, um diese Abonnenten gezielt zu sammeln und sie dann einheitlich zwischen dem Beobachter und dem Beobachter zu verwalten. Als nächstes müssen wir auch einen Anweisungsparser kompilieren, um jedes Knotenelement zu scannen und zu analysieren, die relevanten Anweisungen in einem Abonnenten-Watcher zu initialisieren und die Vorlagendaten zu ersetzen oder die entsprechende Funktion zu binden. Zu diesem Zeitpunkt, wenn der Abonnenten-Watcher Änderungen an der empfängt Wenn die entsprechenden Attribute vorhanden sind, wird die entsprechende Aktualisierungsfunktion ausgeführt, um die Ansicht zu aktualisieren. Als nächstes führen wir die folgenden drei Schritte aus, um eine bidirektionale Datenbindung zu erreichen:

1. Implementieren Sie einen Listener-Observer, um alle Attribute zu kapern und zu überwachen und Abonnenten zu benachrichtigen, wenn es Änderungen gibt.

2. Implementieren Sie einen Abonnenten-Watcher, der Benachrichtigungen über Eigenschaftsänderungen empfangen und entsprechende Funktionen ausführen kann, um die Ansicht zu aktualisieren.

3. Implementieren Sie eine Parser-Kompilierung, die die relevanten Anweisungen jedes Knotens scannen und analysieren, die Vorlagendaten initialisieren und den entsprechenden Abonnenten initialisieren kann.

Das Flussdiagramm sieht wie folgt aus:

Beobachter

durchläuft alle Attribute in Daten und gleichzeitig deren Unterattribute Attribute rekursiv, durch Object.defineProperty()Definieren Sie diese Eigenschaften als Accessor-Eigenschaften. Die Accessor-Eigenschaften verfügen über eigene Get- und Set-Methoden, um Datenänderungen zu überwachen.

Dep

Wir benötigen Nachrichtenabonnenten, um alle Abonnenten zu sammeln, genau wie bei einer Liste. Wenn die Get-Methode des Attributs ausgelöst wird, müssen wir bei Bedarf bestimmen, ob Abonnenten hinzugefügt werden sollen ein Abonnent der Liste, und wenn die Set-Methode ausgelöst wird, werden alle Abonnenten in der Liste benachrichtigt, um zu antworten.

Beobachter

Da wir in der Get-Funktion bestimmen, ob ein Abonnent hinzugefügt werden soll, müssen wir beim Initialisieren des Abonnenten die Get-Funktion auslösen, wenn wir einen Abonnenten zur Liste hinzufügen möchten. Wir können die Abonnenten auf Dep.target zwischenspeichern und sie dann entfernen, nachdem das Hinzufügen erfolgreich war.

Kompilieren

Kompilieren ist für die Kompilierung und Analyse während der Initialisierung verantwortlich, durchläuft jeden Knoten, um zu sehen, welche Knoten Abonnenten benötigen, und ist auch dafür verantwortlich, zukünftige Aktualisierungsfunktionen an Abonnenten zu binden.
OK, das ist meine Zusammenfassung und mein Verständnis nach dem Lesen des Blogs.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der bidirektionalen Bindung von Vue-Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!