Berechnete Eigenschaften
Berechnete Eigenschaften sind eine Möglichkeit, neue Daten aus reaktiven Daten abzuleiten, die sich automatisch aktualisieren, wenn sich die abhängigen Daten ändern. In ofa.js werden berechnete Eigenschaften als spezielle Methoden im proto-Objekt definiert, die mit den JavaScript-Schlüsselwörtern get oder set definiert werden.
Merkmale und Vorteile
- Caching: Die Ergebnisse von berechneten Eigenschaften werden zwischengespeichert; sie werden nur neu berechnet, wenn sich die abhängigen Daten ändern
- Reaktivität: Wenn sich die abhängigen Daten aktualisieren, wird die berechnete Eigenschaft automatisch aktualisiert
- Deklarativität: Abhängigkeiten werden deklarativ erstellt, der Code ist klarer und leichter verständlich
get berechnete Eigenschaft
Der get-Berechnete Eigenschaft wird verwendet, um neue Werte aus reaktiven Daten abzuleiten. Er akzeptiert keine Parameter und gibt nur Werte zurück, die auf Basis anderer Daten berechnet werden.
Der Wert der berechneten Eigenschaft countDouble ist: {{countDouble}}
Praktische Anwendungsszenarien und Beispiele
Berechnete Eigenschaften werden häufig verwendet, um komplexe Datenumwandlungslogik zu verarbeiten, wie z.B. das Filtern von Arrays oder das Formatieren von Anzeigetexten:
- {{$data}}
set Berechnete Eigenschaften
set-Eigenschaften ermöglichen es dir, den zugrunde liegenden Datenstatus durch eine Zuweisungsoperation zu ändern. Sie akzeptieren einen Parameter, der normalerweise verwendet wird, um die ursprünglichen Daten, von denen sie abhängen, rückwärts zu aktualisieren.
Basiswert: {{count}}
Doppelter Wert: {{countDouble}}
Berechnete Eigenschaften vs Methoden
Obwohl Methoden ähnliche Funktionen implementieren können, hat die berechnete Eigenschaft eine Caching-Eigenschaft: Sie wird nur dann neu ausgewertet, wenn sich ihre abhängigen Daten ändern, was die Leistung verbessert.
// Verwendung von berechneten Eigenschaften (empfohlen) - mit Cache
get fullName() {
return this.firstName + ' ' + this.lastName;
}
// Verwendung einer Methode - wird bei jedem Aufruf ausgeführt
fullName() {
return this.firstName + ' ' + this.lastName;
}Hinweise
- Asynchrone Vorgänge vermeiden: Berechnete Eigenschaften sollten synchron und ohne Nebenwirkungen sein, asynchrone Aufrufe oder direkte Änderungen des Komponentenzustands sind darin verboten.
- Abhängigkeitsverfolgung: Es muss ausschließlich auf reaktive Daten angewiesen werden, sonst sind Aktualisierungen unvorhersehbar.
- Fehlerschutz: Wenn innerhalb einer berechneten Eigenschaft zirkuläre Abhängigkeiten oder abnormale Zuweisungen auftreten, kann dies zu Renderfehlern oder sogar Endlosschleifen führen. Setzen Sie unbedingt im Voraus Randbedingungen und treffen Sie eine Ausnahmebehandlung.
Praktische Anwendungsbeispiele
Nachfolgend ein einfaches Beispiel zur Formularvalidierung, das die Nützlichkeit von berechneten Eigenschaften zeigt:
Einfaches Validierungsbeispiel
Status: {{statusMessage}}