Verwendung von Vue zur Implementierung der zugrunde liegenden Prinzipien (ausführliches Tutorial)

Ich werde Ihnen eine Zusammenfassung der Wissenspunkte zu den zugrunde liegenden Implementierungsprinzipien von Vue geben. Wenn Sie dies benötigen, können Sie daraus lernen und darauf zurückgreifen. Ich hoffe, dass die von uns zusammengestellten Inhalte Ihnen helfen können.

Vorwort

Ich habe kürzlich diesen Artikel über die Analyse der Prinzipien von Vue und die Implementierung der bidirektionalen Bindung von MVVM studiert. Ich werde meine Gedanken während des Studiums zusammenfassen.

Vue ist ein typisches MVVM-Framework. Das Modell ist nur ein gewöhnliches JavaScript-Objekt. Wenn Sie es ändern, wird die Ansicht automatisch aktualisiert. Dieses Design macht die Zustandsverwaltung sehr einfach und intuitiv. Wie verknüpft Vue das Modell und die Ansicht?

Übersicht über die Implementierungsprinzipien

Dies ist der Code in dem im Vorwort erwähnten Artikel, ein typischer Code, der die Eigenschaften von Vue verkörpert:

<p id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</p>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
  var vm = new MVVM({
    el: &#39;#mvvm-app&#39;,
    data: {
      word: &#39;Hello World!&#39;
    },
    methods: {
      sayHi: function() {
        this.word = &#39;Hi, everybody!&#39;;
      }
    }
  });
</script>

ue implementiert dies Zwei-Wege-Bindung von Daten Um einen bestimmten Effekt zu erzielen, sind drei Hauptmodule erforderlich:

Beobachter: Kann alle Attribute des Datenobjekts überwachen, bei Änderungen den neuesten Wert abrufen und Abonnenten benachrichtigen

Kompilieren: Für jeden Scan und analysieren Sie die Anweisungen des Elementknotens, ersetzen Sie die Daten gemäß der Anweisungsvorlage und binden Sie die entsprechende Aktualisierungsfunktion

Watcher: Als Brücke zwischen Observer und Compile Es kann jede Attributänderung abonnieren und Benachrichtigungen empfangen. Führen Sie die entsprechende Rückruffunktion aus, die an die Anweisung gebunden ist, um die Ansicht zu aktualisieren.

Observer

Der Kern von Observer besteht darin, Datenänderungen über Object zu überwachen .defineProperty(). Setter und Getter können innerhalb dieser Funktion definiert werden. Immer wenn sich die Daten ändern, wird der Setter ausgelöst. Zu diesem Zeitpunkt benachrichtigt der Beobachter den Abonnenten, und der Abonnent ist der Beobachter.

Watcher

Watcher-Abonnenten dienen als Brücke für die Kommunikation zwischen Observer und Compile. Die wichtigsten Dinge, die sie tun, sind:

1. wenn sie instanziiert werden. Fügen Sie sich selbst im Attribut „Abonnent (dep)“ hinzu

2. Es muss eine update()-Methode

3. haben, um von dep.notice() benachrichtigt zu werden. von Attributänderungen Wenn es seine eigene update()-Methode aufrufen und den in Compile gebundenen Rückruf auslösen kann

Compile

Die Hauptaufgabe von Compile besteht darin, die Vorlagenanweisungen zu analysieren und konvertieren Sie die Vorlage. Ersetzen Sie die Variablen durch Daten, initialisieren Sie dann die Rendering-Seitenansicht, binden Sie die Aktualisierungsfunktion an den Knoten, der jeder Anweisung entspricht, und fügen Sie einen Abonnenten hinzu, um die Daten zu überwachen. Sobald sich die Daten ändern, erhalten Sie eine Benachrichtigung Aktualisieren Sie die Ansicht.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Bootstrap implementiert ein zusammenklappbares, gruppiertes seitliches Navigationsmenü

Beispiel für die Auswahl des Laui-Tabellen-Kontrollkästchens, alle Stile und Funktionen auswählen

Beispiel für das dynamische Hinzufügen einer Option zur Laui-Auswahl

Das obige ist der detaillierte Inhalt vonVerwendung von Vue zur Implementierung der zugrunde liegenden Prinzipien (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!