Dieser Artikel zeigt Ihnen, wie Sie Vue 3.0 responsive verwenden

Wir wissen, dass Vue 2.0 Ojbect.defineProperty verwendet, um das Lesen und Ändern vorhandener Eigenschaftswerte eines Objekts zu kapern, aber diese API kann das Hinzufügen und Löschen von Objekteigenschaften nicht überwachen. Um die internen Eigenschaften eines Objekts tiefgreifend zu kapern, ist es außerdem erforderlich, Ojbect.defineProperty während der Initialisierung rekursiv für die internen Eigenschaften aufzurufen, was zu Leistungseinbußen führt. Um diese Probleme zu lösen, hat Vue 3.0 die Reaktionslogik mithilfe von Proxy neu geschrieben und die entsprechende Leistung optimiert.

Anwendungsfälle

Sehen wir uns ein Beispiel zum Schreiben einer reaktionsfähigen API in Vue 3.0 an:

changePerson kann den Wert der responsiven Daten person ändern. Änderungen am person -Wert lösen eine Neudarstellung der Komponente und eine Aktualisierung des DOM aus.

Hier können wir sehen, dass Entwickler bei der Verwendung von Vue 3.0 reactive Funktionen verwenden, um zu bestimmen, welche Daten Reaktionsdaten sind, und so einen unnötigen Leistungsverbrauch durch Reaktionen vermeiden. Beispielsweise müssen wir in diesem Fall keine nowIndex Reaktionsdaten erstellen. (Natürlich kann Vue 2.0 auch Daten außerhalb der data definieren, bei denen es sich ebenfalls um nicht reagierende Daten handelt.)

Als nächstes werfen wir einen Blick auf das Implementierungsprinzip reactive Funktionen!

Reaktive API-bezogene Prozesse

reaktiv

Codebeschreibung:

• 1. Wenn das target ein schreibgeschütztes Objekt ist, geben Sie das Zielobjekt direkt zurück, da das schreibgeschützte Objekt nicht als reaktionsfähiges Objekt festgelegt werden kann
• 2. Rufen Sie createReactiveObject auf, um den Vorgang fortzusetzen.
  

createReactiveObject erstellt ein responsives Objekt

Codebeschreibung:

• 1. Wenn es sich bei dem Zielobjekt weder um Daten noch um ein Objekt handelt, wird das Objekt direkt zurückgegeben und in der Entwicklungsumgebung eine Fehlermeldung angezeigt.
• 2. Wenn target bereits ein Proxy Objekt ist, gibt es target, (target['__v_raw'] ist sehr clever konzipiert: Wenn target ein Proxy Objekt ist, löst target['__v_raw'] die Methode get aus und durchsucht das Cache-Objekt reactiveMap um zu sehen, ob das Proxy Objekt target mit target selbst identisch ist). Hier wird eine Ausnahme behandelt. Wenn die readonly Funktion auf einem responsiven Objekt ausgeführt wird, müssen Sie fortfahren.
• 3. Überprüfen Sie, ob in reactiveMap ein entsprechendes Proxy Objekt vorhanden ist, und geben Sie das entsprechende Proxy Objekt direkt zurück.
• 4. Stellen Sie sicher, dass nur bestimmte Daten als Antwort bereitgestellt werden können, andernfalls geben Sie einfach target zurück. Die responsive Whitelist sieht folgendermaßen aus:

1. target wurde nicht mit markRaw markiert, oder target hat keinen __v_skip Attributwert oder der Wert __v_skip Attributs ist false ;

2. target kann kein nicht erweiterbares Objekt sein, d. h., target wurde nicht mit preventExtensions , seal und freeze ausgeführt.

3. target ist Object oder Array ;

4. target ist Map , Set , WeakMap , WeakSet ;

• 5. Durch die Verwendung Proxy Funktion zum Entführen target ist das zurückgegebene Ergebnis ein reagierendes Objekt. Die Verarbeitungsfunktion ist hierbei je nach target unterschiedlich (beide Funktionen werden als Parameter übergeben):

1. Die Verarbeitungsfunktion des Object oder Array ist collectionHandlers ;

2. Die Verarbeitungsfunktion von Map , Set , WeakMap , WeakSet ist baseHandlers ;

• 6. Speichern Sie das responsive Objekt für den Cache in reactiveMap . key ist target und value ist proxy .

mutableHandlers-Verarbeitungsfunktion

Wir wissen, dass der Zugriff auf Objekteigenschaften die Funktion get auslöst, das Festlegen von Objekteigenschaften die Funktion set , das Löschen von Objekteigenschaften die Funktion deleteProperty , der Operator „ in “ die Funktion has “ und getOwnPropertyNames “ die Funktion ownKeys auslöst. Als nächstes werfen wir einen Blick auf die Codelogik dieser Funktionen.

Funktion abrufen

Da keine Parameter übergeben werden, sind isReadonly und shallow beide standardmäßig „false“.

Code-Logik :

• 1. Wenn das Attribut __v_isReactive abgerufen wird und „true“ zurückgegeben wird, bedeutet dies, dass das Ziel bereits ein responsives Objekt ist.
• 2. Holen Sie sich das Attribut __v_isReadonly und geben Sie false zurück. (readonly ist eine weitere reaktionsfähige API, die vorerst nicht erklärt wird.)
• 3. Holen Sie sich das Attribut __v_raw und geben Sie das Ziel selbst zurück. Mit diesem Attribut wird bestimmt, ob das Ziel bereits ein reaktionsfähiges Objekt ist.
• 4. Wenn das Ziel ein Array ist und auf einige Attribute trifft, wie etwa „includes“, „indexOf“, „lastIndexOf“ usw., werden diese Funktionsmethoden des Arrays ausgeführt und die Sammlungsabhängigkeitsverfolgung ( arr , TrackOpTypes.GET , i + „) wird für jedes Element des Arrays ausgeführt und dann wird der Wert der Array-Funktion über Reflect abgerufen.
• 5.Reflektierte Bewertung;
• 6. Bestimmen Sie, ob es sich um einen speziellen Attributwert handelt: symbol , __proto__ , __v_isRef , __isVu usw. Wenn es direkt zum zuvor erhaltenen res zurückkehrt, wird keine nachfolgende Verarbeitung durchgeführt.
• 7.Sammlungsabhängigkeiten ausführen;
• 8. Wenn es sich um einen Verweis handelt und das Ziel kein Array oder der Schlüssel keine Ganzzahl ist, werden die Daten entpackt. Dabei handelt es sich um einen weiteren Verweis auf die responsive API, der hier nicht näher erläutert wird.
• 9. Wenn res ein Objekt ist, führen Sie rekursiv reactive aus, um res in ein responsives Objekt umzuwandeln. Hier ein kleiner Optimierungstipp: Der Eigenschaftswert wird erst nach dem Zugriff gekapert. Dadurch wird der Leistungsverlust vermieden, der durch die vollständige Kaperung während der Initialisierung entsteht.

Wann soll die Get-Funktion aufgerufen werden?

Bevor wir diese Frage beantworten, müssen wir zum vorherigen Artikel zum Setup zurückkehren – Das Geheimnis der Setup-Funktion von Vue3.0 lüften .

• Die Funktion setup() wird in der Funktion setupStatefulComponent ausgeführt und das Ausführungsergebnis wird abgerufen:

• Die Logik von handleSetupResult besteht darin, das Intervall setupResult instance.setupState zuzuweisen:

• Dieser instance.setupState wird durch instance.ctx weitergeleitet, sodass beim Zugriff auf und Ändern instance.ctx direkt auf instance.setupState zugegriffen und dieser geändert werden kann:

• Wir haben bereits erwähnt, dass das Rendern eines Teilbaum VNode durch Aufrufen der render erfolgt. Lassen Sie uns anhand der Vorlagenkompilierung sehen, wie render in unserem Beispiel aussieht.

• Es ist ganz klar. Beim Rendern der Vorlage wird person aus ctx übernommen, was eigentlich person von setupState ist. Wenn name , age und address person von setupState abgerufen werden, wird die get Funktion aufgerufen, um die entsprechenden Werte zu erhalten.

Zusammenfassung: Wenn das Komponenteninstanzobjekt die Renderfunktion ausführt, um einen Unterbaum-VNode zu generieren, wird die Get-Funktion des responsiven Objekts aufgerufen.

Track sammelt Abhängigkeiten

Wir haben die Sammlungsabhängigkeit in der Codeerklärung der get -Funktion oben zweimal erwähnt. Was ist also eine Sammlungsabhängigkeit ?
Um Reaktionsfähigkeit zu erreichen, werden einige Funktionen automatisch implementiert, wenn sich die Daten ändern, beispielsweise das Ausführen bestimmter Funktionen. Da die Nebeneffekt-Rendering-Funktion das erneute Rendering der Komponente auslösen und das DOM aktualisieren kann, sind die hier gesammelten Abhängigkeiten die Nebeneffekt-Rendering-Funktionen , die ausgeführt werden müssen, wenn sich die Daten ändern.

Das heißt, wenn die get -Funktion ausgeführt wird, werden die Nebeneffekt-Rendering-Funktionen der entsprechenden Komponente erfasst.

Wir können unser Beispiel verwenden, um das Endergebnis zu veranschaulichen:

set-Funktion

Code-Logik:

• 1. Wenn sich der Wert nicht geändert hat, kehren Sie direkt zurück.
• 2. Stellen Sie den neuen Wert über Reflect .
• 3. Wenn es sich nicht um eine Eigenschaft in der Prototypkette handelt, führen Sie den trigger „Typ add “ aus, wenn es sich um eine neue Eigenschaft handelt; wenn es sich um eine geänderte Eigenschaft handelt, führen Sie den trigger „Typ set aus. (Wenn Reflect.set eine Eigenschaft in der Prototypkette ausführt, wird der Setter erneut aufgerufen, sodass der Trigger nicht zweimal ausgeführt werden muss.)

Triggerverteilungsabhängigkeit

Die Logik des trigger ist sehr klar: Er findet die entsprechende Funktion aus der von der Funktion get gesammelten AbhängigkeitstargetMap und führt dann diese Nebeneffekt-Rendering-Funktionen aus , um das DOM zu aktualisieren.

Zuordnung der Abruf- und Nebeneffekt-Renderingfunktion

Gehen wir zurück und beantworten eine weitere Frage: Wie wird die aus der Get-Funktion gesammelte Nebeneffekt-Rendering-Funktion bestimmt? Das heißt, wie bestimmen wir, welche Nebeneffekt-Rendering-Funktion beim Zugriff auf person.name zugeordnet werden soll?

Lassen Sie uns die Logik Schritt für Schritt klären:

• Der letzte Schritt beim Mounten mountComponent Komponente besteht darin , eine Rendering-Funktion mit Nebeneffekten auszuführen :

• setupRenderEffect definiert zuerst eine Komponenten-Rendering-Funktion componentUpdateFn , kapselt dann dieses omponentUpdateFn in ReactiveEffect , weist die run Methode des ReactiveEffect Objekts update Eigenschaft des Komponentenobjekts zu und führt dann update Methode aus, die tatsächlich die run Methode des ReactiveEffect -Objekts ausführt.

• Die Run-Methode von ReactiveEffect enthält die übergebene Funktion, die aktuelle Szene ist die Komponenten-Rendering-Funktion componentUpdateFn und verwendet zwei globale Variablen effectStack und activeEffect .
• Beim Ausführen der Run-Methode wird componentUpdateFn zuerst activeEffect zugewiesen, in effectStack geschoben und dann die Methode componentUpdateFn ausgeführt. Wenn die Ausführung abgeschlossen ist, wird componentUpdateFn aus dem Stapel entfernt und activeEffect als neue Funktion oben auf dem Stapel zugewiesen.

• Wenn componentUpdateFn ausgeführt wird, wird renderComponentRoot aufgerufen, wodurch im Wesentlichen die Rendermethode des Komponenteninstanzobjekts ausgeführt wird.

• Bisher sind wir beim Inhalt dieses Artikels angelangt. Wenn in der Render-Methode auf die entsprechenden Daten zugegriffen wird, wird die Get-Funktion ausgelöst. Die in Get gesammelten Daten sind

Eine Stapelstruktur dient hier vor allem der Lösung des Problems verschachtelter Effekte.

Ausführungsfilterung von Nebeneffekt-Renderingfunktionen

Wenn Sie sorgfältig darüber nachdenken, haben Sie möglicherweise eine Frage? Name, Alter und Adresse werden alle geändert und sind alle mit derselben Rendering-Funktion verknüpft. Theoretisch löst das gleichzeitige Ändern dieser drei Werte drei erneute Renderings der Komponenten aus, was offensichtlich unvernünftig ist. Wie steuert Vue die Ausführung also nur einmal?

• Wir müssen dorthin zurückgehen, wo ReactiveEffect die Rendering-Funktion componentUpdateFn kapselt. Schauen wir uns den zweiten Parameter, scheduler , an:

• Beim Verteilen von Abhängigkeiten wird, sofern scheduler vorhanden ist, scheduler ausgeführt:

• Die Ausführungslogik von queueJob besteht darin, die Aufgabe herauszufiltern und nicht auszuführen, wenn sie sich in der Warteschlange befindet.

Abschluss

In diesem Artikel wird das Reaktionsprinzip von Vue3.0 im Detail vorgestellt: Mithilfe eines Proxys werden Objekte gekapert. Beim Zugriff auf das Objekt wird die Get-Methode ausgelöst und Abhängigkeiten werden zu diesem Zeitpunkt erfasst . Beim Ändern der Objektdaten wird die Set-Methode ausgelöst und Abhängigkeiten werden versendet , d. h. die Nebeneffekt-Rendering-Funktion der Komponente wird aufgerufen (nicht darauf beschränkt), sodass die Komponente erneut gerendert und das DOM aktualisiert werden kann.

Dies ist das Ende dieses Artikels über die Reaktionsfähigkeit von vue3.0. Weitere relevante Inhalte zur Reaktionsfähigkeit von vue3.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!