Was ist das datengesteuerte Prinzip von Vue?

Das datengesteuerte Prinzip von Vue besteht darin, Daten-Hijacking in Kombination mit dem Herausgeber- und Abonnentenmodell zu verwenden, die Setter und Getter jeder Eigenschaft über „Object.defineProperty()“ zu kapern, Nachrichten an Abonnenten zu veröffentlichen, wenn sich die Daten ändern, und eine entsprechende Überwachung auszulösen Rückrufe.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist das datengesteuerte Prinzip von vue?

Was ist datengesteuert?

Datengesteuert ist das größte Merkmal von vue.js. In vue.js bedeutet das sogenannte datengesteuert, dass sich die Benutzeroberfläche entsprechend ändert, wenn sich die Daten ändern, und Entwickler das DOM nicht manuell ändern müssen.

Wenn wir beispielsweise auf eine Schaltfläche klicken, muss der Text des Elements zwischen Ja und Nein umgeschaltet werden. In jquery folgen wir beim Ändern der Seite im Allgemeinen diesem Prozess. Wir binden Ereignisse an die Schaltfläche, rufen dann das der Kopie entsprechende Element-Dom-Objekt ab und ändern dann den Kopierwert des Dom-Objekts entsprechend dem Schalter.

Wie erreicht VueJs diese Art von Datenlaufwerk?

vue implementiert die bidirektionale Datenbindung hauptsächlich durch die Verwendung von Daten-Hijacking in Kombination mit dem Publisher-Subscriber-Modell, indem es die Setter und Getter jeder Eigenschaft über Object.defineProperty() kapert und Nachrichten an Abonnenten veröffentlicht, wenn sich die Daten ändern. Auslösen des entsprechenden Listening-Callbacks.

Wenn ein normales Javascript-Objekt als Datenoption an eine Vue-Instanz übergeben wird, durchläuft Vue seine Eigenschaften und verwendet Object.defineProperty, um sie in Getter/Setter umzuwandeln. Die Getter/Setter sind für den Benutzer nicht sichtbar, aber intern ermöglichen sie Vue, Abhängigkeiten zu verfolgen und Änderungen zu benachrichtigen, wenn auf Eigenschaften zugegriffen und diese geändert werden. Die bidirektionale Datenbindung von

vue verwendet MVVM als Eingang zur Datenbindung, integriert Observer, Compile und Watcher, verwendet Observer zum Überwachen der Datenänderungen seines eigenen Modells und verwendet Compile zum Parsen und Kompilieren von Vorlagenanweisungen (wird in vue Parse verwendet). {undefiniert{}}) und verwenden Sie schließlich den Beobachter, um eine Kommunikationsbrücke zwischen dem Beobachter und Compile aufzubauen, um einen bidirektionalen Bindungseffekt von Datenänderungen zu erzielen -> Aktualisierungen anzeigen, interaktive Änderungen anzeigen (Eingabe) -> Datenmodelländerungen.

Verständnis von Getter/Setter?

Beim Ausdrucken der Attribute im Datenobjekt unter der Vue-Instanz verfügt jedes seiner Attribute über zwei entsprechende get- und set-Methoden. Wie der Name schon sagt, dient get zur Werterfassung und set zur Zuweisung. Wir verwenden Obj.prop, um Werte abzurufen und zuzuweisen, aber es gibt ein Problem damit. Woher weiß ich, dass sich der Wert des Objekts geändert hat? Es ist also an der Reihe, dass das Set erscheint. Sie können get und set als Funktionen verstehen. Wenn wir die Eigenschaften des Objekts aufrufen, geben wir get.property(){...} ein und bestimmen zunächst, ob das Objekt diese Eigenschaft hat. Wenn nicht, fügen wir eine Namenseigenschaft hinzu. Und weisen Sie ihm einen Wert zu; wenn ein Namensattribut vorhanden ist, geben Sie das Namensattribut zurück. Sie können sich get als eine Funktion vorstellen, die einen Wert annimmt, und der Rückgabewert der Funktion ist der Wert, den sie erhält. Was meiner Meinung nach wichtiger ist, ist das Set-Attribut. Zu diesem Zeitpunkt wird set name(val){...} eingegeben. Der formale Parameter val ist der Wert, den ich dem Namensattribut zugewiesen habe Mit dieser Funktion können Sie viele Dinge tun, z. B. eine bidirektionale Bindung! Da jede Änderung dieses Werts durch einen Satz erfolgen muss, kann er nicht mit anderen Methoden geändert werden, was einem universellen Listener entspricht. Der Objektprototyp von ES5 verfügt über zwei neue Attribute __defineGetter__ und __defineSetter__, die speziell zum Binden von get und set an Objekte verwendet werden. Es wird empfohlen, die folgende Methode zu verwenden, da sie auf dem Prototyp geschrieben ist und daher vererbt und wiederverwendet werden kann.

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonWas ist das datengesteuerte Prinzip von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!