Änderungen beobachten

Ein berechneter Wert berechnet einen Wert, der angezeigt wird. Manchmal willst du aber, wenn sich Daten ändern, etwas tun: es speichern, ausgeben, irgendwohin schicken. So etwas heißt Seiteneffekt, und dafür hat Vue Watcher, die du mit watch() erstellst:

import { ref, watch } from "vue";

const kategorie = ref("alle");

watch(kategorie, (neuerWert, alterWert) => {
    console.log(`Jetzt angezeigt: ${neuerWert} (vorher: ${alterWert})`);
});

watch() bekommt zwei Argumente. Das erste ist, was beobachtet wird: ein Ref oder ein berechneter Wert, ohne .value. Das zweite ist eine Funktion, die Vue nach jeder Änderung ausführt, mit dem neuen und dem alten Wert. Wenn der Kunde Tee wählt, zeigt die Konsole:

Jetzt angezeigt: tee (vorher: alle)

Die Funktion gibt nichts zurück; sie erledigt ihre Arbeit, und damit ist es gut. Und sie läuft nicht, wenn die App startet, sondern erst nach einer Änderung. Oft brauchst du nur den neuen Wert, dann lässt du den alten weg: (wert) => { … }.

Ein typischer Seiteneffekt ist das Speichern in localStorage. In dieser Übung tippt der Kunde einen Namen für die Bestellung, und die App soll ihn sich für das nächste Mal merken. Ein Watcher speichert den Namen nach jeder Änderung, und wenn die App startet, liest sie ihn wieder ein. Aus dem JavaScript-Kurs weißt du, dass getItem() null zurückgibt, wenn nichts gespeichert ist, also prüfe das:

const gespeichert = localStorage.getItem("farbe");
const farbe = ref(gespeichert === null ? "gruen" : gespeichert);

In der Vorschau startet jeder Klick auf Ausführen die App neu, und solange du die Übung offen hast, findet die App, was sie vorher gespeichert hat. Der Button Gespeicherte Daten löschen in der Konsole löscht es, als wäre die App nie geöffnet worden.

Ein typischer Fehler ist watch(name.value, …). Damit bekommt watch() den Text, der im Ref steht, und nicht das Ref, und ein Text allein kann sich nicht ändern, also hat Vue nichts zu beobachten. Die Konsole zeigt dann eine Warnung, die mit [Vue warn]: Invalid watch source beginnt.