Was sind die beiden Kerne von Vuejs?

Die beiden Kerne von Vuejs sind datengesteuerte und Komponentensysteme. Datengesteuert ist eine bidirektionale Datenbindung, die dazu dient, die Konsistenz von Daten und Ansichten sicherzustellen. Das Komponentensystem kann die Seite in mehrere relativ unabhängige Module abstrahieren; es kann die Wiederverwendung von Code realisieren, die Entwicklungseffizienz und Codequalität verbessern und die Codewartung erleichtern.

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

Die beiden Kerne von vue.js: 1. Datengesteuert ------------- 2. Komponentensystem

1. Datengesteuert, dh bidirektionale Bindung von data

data Nach einer Änderung wird die Seite neu gerendert. Das ist die Reaktionsfähigkeit von Vue.

Um diesen Prozess abzuschließen, müssen wir:

• Änderungen in Daten erkennen
• Erfassen, auf welche Daten die Ansicht angewiesen ist
• Wenn sich die Daten ändern, automatisch den Teil der Ansicht „benachrichtigen“, der aktualisiert werden muss, und Aktualisieren Sie es

Entsprechen Sie dem Fachmann. Die gängigen Sprichwörter sind:

• Datenentführung/Datenproxy
• Abhängigkeitssammlung
• Veröffentlichungs- und Abonnementmodell

Das heißt: Der Kern der Reaktionsfähigkeit von Vue besteht darin, dass Abhängigkeiten gesammelt werden während des Getters und Abhängigkeitsaktualisierungen werden während des Setters ausgelöst.

Diese Getter/Setter sind für den Benutzer unsichtbar, aber intern ermöglichen sie Vue, Abhängigkeiten zu verfolgen und Änderungen zu benachrichtigen , wenn auf Eigenschaften zugegriffen und diese geändert werden. Object.definePropertyJede Komponenteninstanz entspricht einer Watcher-Instanz, die die „berührten“ Dateneigenschaften als Abhängigkeiten während des Komponenten-Rendering-Prozesses aufzeichnet. Wir sammeln Abhängigkeiten während des Getters. Die Abhängigkeitserfassung ist die Erfassung von Abonnementdatenänderungsbeobachtern. Der Zweck der Abhängigkeitserfassung besteht darin, die entsprechenden Abonnenten zu benachrichtigen, um die relevante Logik zu verarbeiten. Wenn der Setter ausgelöst wird, wird die Abhängigkeitsaktualisierung ausgelöst. Später, wenn der

Setter der Abhängigkeit ausgelöst wird,

, benachrichtigt den Beobachter, wodurch die zugehörige Komponente erneut gerendert wird.

Zusammenfassung:

1) Prinzip:

Beim Erstellen einer Vue-Instanz durchläuft Vue die Eigenschaften der Datenoption und verwendet Object.defineProperty, um Getter und Setter zu den Eigenschaften hinzuzufügen, um das Lesen von Daten zu kapern ( Getter werden verwendet, um von der Sammlung abhängig zu sein, Setter werden zum Versenden von Aktualisierungen verwendet) und verfolgen Abhängigkeiten intern und benachrichtigen Änderungen, wenn auf Eigenschaften zugegriffen und diese geändert werden.

Jede Komponenteninstanz verfügt über eine entsprechende Watcher-Instanz, die alle Datenattribute der Abhängigkeit während des Komponenten-Rendering-Prozesses aufzeichnet (Abhängigkeitssammlung sowie berechnete Watcher- und Benutzer-Watcher-Instanzen). Setter-Methode Die Watcher-Instanz, die von diesen Daten abhängt, wird benachrichtigt, eine Neuberechnung durchzuführen (Updates zu verteilen), , und dadurch die zugehörigen Komponenten neu zu rendern. 2) Implementierungsprozess:

Wir wissen bereits, dass wir zur Implementierung der bidirektionalen Datenbindung zunächst die Daten kapern und überwachen müssen, also müssen wir einen Beobachter einrichten, um alle Attribute 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 erhält der Watcher beim Abonnieren die Änderung von Wenn Sie das entsprechende Attribut verwenden, 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 Eigenschaften 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 und die entsprechenden Abonnenten gemäß den initialisierten Vorlagendaten initialisieren kann

Hinweis: Proxy 是 JavaScript 2015 的一个新特性。Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性，Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外Proxy支持代理数组的变化。Proxy ist die von vue3.0 verwendete Methode

2. Verständnis:

1) Kann die Seite in mehrere relativ unabhängige Module abstrahieren;

2) Code-Wiederverwendung implementieren und verbessern Entwicklungseffizienz und Codequalität, einfache Codepflege

Kernoptionen für Komponenten

1 Vorlage: Die Vorlage deklariert die Zuordnungsbeziehung zwischen den Daten und dem DOM, die letztendlich dem Benutzer angezeigt wird.

2 Anfangsdaten (Daten): Der anfängliche Datenzustand einer Komponente. Bei wiederverwendbaren Komponenten ist dies normalerweise der private Status.

3 Akzeptierte externe Parameter (Requisiten): Daten werden über Parameter zwischen Komponenten übertragen und geteilt.

4 Methoden: Änderungen an Daten werden im Allgemeinen innerhalb der Methoden von Komponenten durchgeführt.

5 Lifecycle-Hooks: Eine Komponente löst mehrere Lifecycle-Hook-Funktionen aus. Die neueste Version 2.0 hat den Namen der Lifecycle-Funktion stark geändert.

6 Private Ressourcen (Assets): In Vue.js werden benutzerdefinierte Anweisungen, Filter, Komponenten usw. zusammenfassend als Ressourcen bezeichnet. Eine Komponente kann ihre eigenen privaten Ressourcen deklarieren. Private Ressourcen können nur von der Komponente und ihren Unterkomponenten aufgerufen werden.

Verwandte Empfehlungen: „

vue.js Tutorial

“

Das obige ist der detaillierte Inhalt vonWas sind die beiden Kerne von Vuejs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!