Detaillierte Erklärung des VUE-Reaktionsprinzips

1. Grundlage des Responsive-Prinzips

Das Grundprinzip der Reaktionsfähigkeit basiert auf Object.defineProperty(obj, prop, descriptor) . Get- und Set-Methoden können im descriptor definiert werden. Die Get-Methode kann beim Abrufen des Eigenschaftswerts ausgelöst werden (Abhängigkeiten können gesammelt werden), und die Set-Methode kann beim Festlegen des Eigenschaftswerts ausgelöst werden (Abhängigkeiten können aktualisiert werden).

Erweiterung: Das Obige ist das grundlegende Reaktionsprinzip von vue2.0. Das Grundprinzip von vue3.0 ist Proxy, das die Abruf- und Festlegungsmethoden von Attributen überwachen, das Hinzufügen und Löschen von Attributen überwachen usw. kann. Es ist leistungsfähiger als Object.defineProperty, aber nicht mit IE11 kompatibel.

2. Kernobjekte: Dep und Watcher

Dep : Jede von vue in Daten deklarierte Eigenschaft generiert ein Instanzobjekt von Dep, und Dep.subs speichert den Watcher, der aktualisiert werden muss, wenn sich die Eigenschaft ändert.

Watcher : Es gibt drei Situationen, in denen Watcher-Instanzobjekte generiert werden:

1. Berechnete Eigenschaften, definiert in „Berechnet“.

2. Die in Watch geschriebene Überwachungsfunktion;

3. Komponenten-Rendering-Watcher;

3. Abhängigkeiten sammeln und aktualisieren

3.1 Abhängigkeiten erfassen

Verteilen Sie das Watcher-Instanzobjekt w an die Dep des Attributs, von dem es abhängt. Der Prozess läuft wie folgt ab:

1. Setze Dep.target = das Instanzobjekt w des aktuellen Beobachters;

2.w führt die definierte Funktion aus (d. h. die in computed/watch geschriebene Funktion);

3. Wenn das in den Daten definierte Attribut während des Funktionsausführungsprozesses verwendet wird, wird die Get-Methode des Attributs ausgelöst. In der Get-Methode fügt das Dep-Instanzobjekt dep das in Dep.target gespeicherte w in das Array dep.subs ein, um die Abhängigkeitssammlung zu vervollständigen.

Hinweis: Dep.target ist das Instanzobjekt des aktuellen Watcer

3.2 Update-Abhängigkeiten

Wenn wir eine von uns deklarierte Eigenschaft ändern, wird die Set-Methode der Eigenschaft ausgelöst. Die Set-Methode aktualisiert die im Array dep.subs gesammelten Watcher-Instanzobjekte, d. h. sie löst die in computed und watch definierten Funktionen aus.

4. Quellcode-Debugging

4.1 Testseitencode

<Vorlage>
  <div>
    <div>ein:<Eingabe v-Modell="ein" /></div>
    <div>c:{{ c }}</div>
    <div>b:<Eingabe v-Modell="b" /></div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten: () => {
    zurückkehren {
      A: '',
      B: ''
    }
  },
  berechnet: {
    C() {
      gib 'Quelle von ' + this.a zurück;
    }
  },
  betrachten:
    B() {
      console.log('b geändert');
    }
  }
};
</Skript>

Der obige Code generiert nach der Initialisierung von Vue die folgenden Objekte:

1. Objektbeschreibung

Dep-Instanzobjekte, die den Attributen a und b entsprechen (Sammeln von Watchern, die aktualisiert werden müssen, wenn sich a und b ändern): depA , depB ;

Die Seiten-Rendering-Funktion generiert das entsprechende Watcher-Instanzobjekt updateWatcher ;

Die berechnete Eigenschaft c generiert das entsprechende Watcher-Instanzobjekt: watcherC ;

Das Watch-Listener-Attribut b generiert das entsprechende Watcher-Instanzobjekt: watcherB ;

2. Beziehung zwischen Dep und Watcher

Die Seite muss neu gerendert werden, wenn sich a und b ändern, daher ist updateWatcher in subs von depA und depB vorhanden.

Die berechnete Eigenschaft c hängt von der Änderung der Eigenschaft a ab, daher existiert watcherC in den Subs von depA;

Änderungen in b lösen die Abhörfunktion von b in der Definition von watch aus, sodass watcherB in Subs von depB existiert;

3. Endgültiges Ergebnis der Beziehung

Die endgültige Eigenschaft „a“ sammelt Abhängigkeiten: depA.subs = [ updateWatcher, watcherC] ;

Die endgültige Eigenschaft b sammelt Abhängigkeiten depB.subs = [ updateWatcher, watcherB] ;

4.2 Quellcode-Debugging

Suchen Sie die Quelldatei: node_modules\vue\dist\vue.runtime.esm.js ;

Dabei handelt es sich im Wesentlichen um folgende Funktionen:

1. Sammlungsabhängige Eintragsfunktion: initState (wird ausgeführt, wenn die Seite initialisiert wird);

Die Initialisierungsreihenfolge ist Daten-->Berechnet-->Überwachen. Der Grund hierfür ist, dass „Berechnet“ von den Daten abhängt und „Überwachen“ von den Daten und dem Überwachen. Daher müssen die abhängigen Elemente zuerst initialisiert werden.

2. Generieren Sie beim Initialisieren von berechneten und überwachten Objekten Watcher-Instanziierungsobjekte

Führen Sie zuerst die Funktion Watcher.get aus und setzen Sie Dep.target = das aktuelle Watcher-Instanziierungsobjekt

Auslösen der Sammlung von Abhängigkeiten

Führen Sie die Funktion in der berechneten Eigenschaft aus. Wenn auf eine Eigenschaft in Daten zugegriffen wird, wird die Get-Methode der Dateneigenschaft ausgelöst, wodurch die Abhängigkeitssammlung ausgelöst wird:

Wenn diese Eigenschaft geändert wird, wird die Set-Methode ausgelöst, die die Aktualisierung des Watcher-Objekts in dep.subs auslöst.

Abschließend wird die Update-Funktion des Watchers angestoßen und der zu aktualisierende Watcher in die Warteschlange gestellt:

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!