Detaillierte Erklärung der Prinzipien des responsiven Systems von Vue

Die Grundprinzipien des responsiven Systems von Vue

Wenn wir vue verwenden, können wir die entsprechende Ansicht beeinflussen, indem wir die Daten bearbeiten. Wie wird dieser Mechanismus implementiert?

Denken Sie einmal darüber nach: Ist es nicht so, als würden unsere Datenvorgänge von „jemandem“ überwacht? Sobald wir eine Änderung an den Daten vornehmen, kann „jemand“ dies erkennen und uns helfen, die Ansicht zu aktualisieren

Also, wer ist dieser „Jemand“? Tatsächlich ist es sehr verbreitet. Es ist die Object.defineProperty, die wir in den Grundlagen gelernt haben. Indem wir sie zur Verarbeitung der Daten verwenden, können wir die Rückruffunktion „read“ implementieren, wenn die Daten gelesen werden, und die Rückruffunktion „write“, wenn die Daten geschrieben werden.

Im Folgenden gehen wir kurz auf die Anwendung dieser Methode ein und verwenden einige praktische Beispiele, um Ihnen das Verständnis dieses Prinzips zu erleichtern.

1. Überprüfen Sie die Verwendung von Object.defineProperty

Parametererklärung:

	obj: Zielobjekt prop: Eigenschaftsname des zu bedienenden Zielobjekts descriptor: Deskriptor	
	im Objekt übergebener Rückgabewert

Einige Attribute des Deskriptors. Stellen Sie kurz einige Attribute vor.

	aufzählbar, ob die Eigenschaft aufzählbar ist, der Standardwert ist „false“.
	konfigurierbar, ob die Eigenschaft geändert oder gelöscht werden kann, der Standardwert ist false.
	beschreibbar, ob die Eigenschaft geändert werden kann, der Standardwert ist false
	get, Methode zum Abrufen von Attributen.
	set, Methode zum Setzen von Eigenschaften.

Vollständige Nutzung:

	Object.defineProperty(Objekt, Eigenschaft, Deskriptor)

2. Übung 1: Verwenden Sie Object.defineProperty, um die Alterseigenschaft einer Person zu überwachen

Fallstricke

Schauen Sie sich den Code unten an. Scheint es auf den ersten Blick so, als ob alles in Ordnung wäre?

Wenn jemand das Altersattribut einer Person liest, gebe ich das Altersattribut der Person zurück; wenn jemand das Altersattribut der Person ändert, ändere ich direkt den Wert von person.age.

Aber! Studenten, nach dem Ausführen gibt der Compiler, obwohl kein Fehler vorliegt, weiterhin „@@Jemand hat die Alterseigenschaft gelesen“ aus.

Warum ist das so? Denken Sie darüber nach: Wenn Sie in der Get-Funktion direkt „person.age“ zurückgeben, zählt dies als erneutes Lesen des Altersattributs der Person? Zu diesem Zeitpunkt führt das Programm die Get-Funktion des Alters immer wieder erneut aus.

Dies ist beispielsweise gleichbedeutend damit, dass Sie das Alter lesen möchten und daher dem Compiler sagen: „Ich möchte person.age ausgeben.“ Okay, der Compiler überprüft person.age und findet, dass es eine Get-Funktion hat, also führt er die Get-Funktion aus. Zu diesem Zeitpunkt denken Sie, dass Sie den Wert erhalten werden, aber Sie haben nicht damit gerechnet, dass die Get-Funktion dem Compiler erneut sagt: „Ich möchte person.age.“ Auf diese Weise entsteht ein Teufelskreis! !

Wie kann man das Problem also lösen? Ich kann person.age in get nicht direkt zurückgeben. Wie kann ich also den Wert dieses Attributs erhalten?

Antwort : Kann es durch Variablen ersetzt werden?

Ich trage den Wert von person.age in die Variable ageNumber ein. Wenn ich ihn lesen möchte, gebe ich den Wert von ageNumber zurück; wenn ich ihn ändern möchte, ändere ich den Wert von ageNumber.

Würde dies nicht die direkte Verwendung von person.age für den Zugriff in Get- und Set-Funktionen vermeiden?

Korrekter Code

An dieser Stelle ist die Wirkung abgeschlossen und kann beim Lesen und Ändern überwacht werden.

3. Datenbroker

Was bedeutet Datenbroker?

A: Einfach ausgedrückt geht es darum, die Eigenschaften eines anderen Objekts über einen Objekt-Proxy zu bedienen (lesen/schreiben).

Ein bisschen abstrakt, oder? Lassen Sie mich dies anhand des folgenden kleinen Beispiels erklären.

Wenn ein Lehrer die Noten eines Schülers überprüfen oder ändern möchte, kann er direkt am Lehrerobjekt arbeiten, ohne direkt am Schülerobjekt arbeiten zu müssen.

Dies ist, was ich oben erklären möchte. Das Lehrerobjekt (teacher) delegiert die Operation (Lesen/Schreiben) des Punkteattributs (score) an das Schülerobjekt (student).

4. Implementieren von Responsive Thinking in Vue

Studierende mit Grundkenntnissen zu Vue2 sollten wissen, ob die in data() {} in Vue definierten Daten auf dem VM-Objekt gemountet werden. Dann verarbeiten wir die Daten über diesen Datennamen, richtig?

Ist dies das Äquivalent zum Szenario im kleinen Beispiel oben? Hier führt das VM-Objekt den Vorgang (Lesen/Schreiben) der Attribute im von Ihnen definierten Datenobjekt durch.

Lassen Sie uns anhand eines weiteren Beispiels das Responsive-Prinzip von Vue vollständig implementieren.

Übergeben Sie alle Attribute im Datenobjekt an das VM-Objekt als Proxy (lassen Sie die VM die (Lese-/Schreib-)Operationen der Attribute im Datenobjekt steuern). Wenn sich die Daten ändern, kann die entsprechende Ansicht aktualisiert werden

Zusammenfassen

1. Datenproxy in Vue:

Verwenden Sie das VM-Objekt, um den Vorgang (Lesen/Schreiben) der Attribute im Datenobjekt zu proxyen

2. Vorteile des Datenproxys in Vue:

Bequemere Bedienung von Daten in Daten

3. Grundprinzipien:

Fügen Sie alle Eigenschaften im Datenobjekt über Object.defineProperty() zur VM hinzu.

Geben Sie für jede der VM hinzugefügte Eigenschaft einen Getter/Setter an.

Bedienen (lesen/schreiben) Sie die entsprechenden Attribute in Daten innerhalb getter/setter .

4. Implementieren von Responsive Thinking in Vue

Ohne Verwendung eines Datenproxys werden die Daten direkt der VM zugewiesen und auf ihr bereitgestellt.

1. Die Methode in der folgenden Abbildung ist eine allgemeine Methode zum Festlegen von Get und Set für Datenobjekte

2. Beim Erstellen eines neuen Vue wird das vom Benutzer übergebene Datenobjekt direkt auf der Vue-Instanz bereitgestellt

Überwachen Sie dann das Datenobjekt auf der Vue-Instanz (responsive Verarbeitung).

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