So verstehen Sie den Datentreiber von vuejs

Datengesteuert bedeutet in Vuejs, dass sich die Benutzeroberfläche entsprechend ändert und Entwickler das DOM nicht manuell ändern müssen, sondern einfach das DOM ändern, indem sie die Datenänderungen steuern, sodass die Ansicht geändert wird (Der Inhalt des DOM ändert sich, wenn sich die Daten ändern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Erstens: Was ist Vue und wie ist Vue zu verstehen?

Vue ist ein Framework, das auf der datengesteuerten Seite im MVVM-Modus basiert und Daten an die Ansicht bindet. Es handelt sich um eine Technologie zur Implementierung von Single-Page-Anwendungen.

Mehrere Hauptfunktionen zusammengefasst:

• Einfach

• Leicht

• Schnell

• Datengesteuert

• Modulfreundlich

• Komponentisierung

vue setzt auf Datentreiber zwei- Die Bindung erleichtert uns die Entwicklung von Seiten und Entwickler müssen das DOM nicht manuell ändern. Vue macht alles einfacher mit der bidirektionalen Datenbindung. Seine datengesteuerte bidirektionale Bindung wird durch die durch Object.defineProperty() definierten Datensätze und Get-Funktionsprinzipien implementiert.

2. Die komponentenbasierte Entwicklung macht das Projekt skalierbarer und portabler und der Code ist besser wiederverwendbar.

3. Einseitige Anwendungserfahrung, lokale Komponenten aktualisieren die Benutzeroberfläche, um die Benutzererfahrung zu beschleunigen und Zeit zu sparen.

Einzelseitige Anwendung, auch SPA genannt, beschränkt alle Aktivitäten auf eine Webseite und lädt das entsprechende HTML, JavaScript und CSS nur, wenn die Webseite initialisiert wird. Nach Abschluss des Ladevorgangs wird die Seite nicht mehr neu geladen oder springt. Nur die darin enthaltenen Komponenten oder Module interagieren und springen über die Hash- oder Verlaufs-API und rufen Daten über Ajax ab, um die Antwortfunktion zu implementieren heißt Einzelseite!

4. Der js-Code verfügt über unsichtbare Standards und der durch Teamarbeit entwickelte Code ist besser lesbar.

2: Was ist das Prinzip von Vue Data-Driven (bidirektionale Datenbindung)?

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 dieses Datenlaufwerk?

Vue implementiert die bidirektionale Datenbindung hauptsächlich durch: Verwendung von Datenhijacking in Kombination mit dem Publisher-Subscriber-Modell, Kaperung der Setter und Getter jeder Eigenschaft über Object.defineProperty() und Veröffentlichung von Nachrichten an Abonnenten, wenn sich der Datenauslöser ändert den entsprechenden Listening-Callback. Wenn Sie ein einfaches Javascript-Objekt als Datenoption an eine Vue-Instanz übergeben, durchläuft Vue seine Eigenschaften und konvertiert sie mithilfe von Object.defineProperty in Getter/Setter. 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.

Vues bidirektionale Datenbindung verwendet MVVM als Eingang zur Datenbindung und integriert Observer, Compile und Watcher. Es verwendet Observer, um die Datenänderungen seines eigenen Modells zu überwachen, und verwendet Compile, um Vorlagenanweisungen zu analysieren und zu kompilieren in vue Parse {{}}) und verwenden Sie schließlich Watcher, um eine Kommunikationsbrücke zwischen Beobachter und Compile zu bauen, um einen bidirektionalen Bindungseffekt von Datenänderungen -> Ansichtsaktualisierung, interaktive Änderung (Eingabe) -> Datenmodelländerung zu erzielen .

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. Unter normalen Umständen erhalten wir die value und Die Zuweisung verwendet obj.prop, es liegt jedoch ein Problem vor. 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 ein Namensattribut hinzu 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 In dieser Funktion können Sie viele Dinge tun, z. B. die 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.

Drei: MVVM-Framework

Der Datentreiber von Vue.js wird über das MVVM-Framework implementiert. Das MVVM-Framework besteht hauptsächlich aus drei Teilen: Modell, Ansicht und Ansichtsmodell.

• Modell: bezieht sich auf den Datenteil, der dem Javascript-Objekt im Frontend entspricht.

• Ansicht: bezieht sich auf den Ansichtsteil, der dem Dom im Frontend entspricht Das verbindet die Ansicht und die Daten. Kommunikation: Daten (Modell) und Ansicht (Ansicht) können nicht direkt kommunizieren, sondern müssen über ViewModel miteinander kommunizieren. Wenn sich die Daten ändern, kann das ViewModel die Änderung überwachen und die Ansicht benachrichtigen, um rechtzeitig Änderungen vorzunehmen. Wenn auf der Seite ein Ereignis ausgelöst wird, kann viewMOdel in ähnlicher Weise auch das Ereignis abhören und das Modell zur Reaktion benachrichtigen. Viewmodel entspricht einem Beobachter, der die Aktionen beider Parteien überwacht und die andere Partei rechtzeitig benachrichtigt, um entsprechende Vorgänge durchzuführen.

Verwandte Empfehlungen: „
• vue.js Tutorial

  “

Das obige ist der detaillierte Inhalt vonSo verstehen Sie den Datentreiber von vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!