Das Javascript-Framework Vue.js, Teil 6 Datenüberwachung mit Computed Properties und Watchern

Wer Daten innerhalb ihrer Vue-Komponenten automatisiert ändern oder andere Aktionen auslösen möchte, kann hierfür Computed Properties und Watcher nutzen. Hier zeigen wir, wie sich diese beiden Funktionen nutzen lassen.

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Confluent Germany GmbH

In der Softwareentwicklung ist es üblich, Daten möglichst normalisiert und nicht mehrfach abzuspeichern. Zur Verwahrung der Daten eines Kunden sieht man deshalb Attribute wie Anrede, Vor- und Nachname, aber kein weiteres Feld für den zusammengesetzten Namen vor. Der komplette Name in der Form Herr Max Mustermann lässt sich schließlich jederzeit aus den Bestandteilen zusammensetzen.

Um das aber nicht an mehreren Stellen und zudem auf stets konsistente Art und Weise machen zu müssen, lassen sich in Vue sogenannte „Computed Properties“ einsetzen. Im Options-Objekt werden sie hinter dem Schlüssel computed aufgeführt. Das folgende Codestück zeigt ein Beispiel für eine solche berechnete Eigenschaft namens displayName, das die geschilderte Problematik umsetzt: