Von Anfang an beobachten

Ein Watcher läuft nur nach einer Änderung, nicht beim Start der App. Meistens ist das genau richtig: Einen Namen, der gerade erst gelesen wurde, muss man nicht speichern. Aber manche Seiteneffekte werden auch von Anfang an gebraucht. Dafür gibt es eine weitere Option, { immediate: true }. Der Watcher läuft dann einmal gleich beim Start der App und danach nach jeder Änderung, wie bisher:

const name = ref("Anna");

watch(
    name,
    (neuerWert, alterWert) => {
        console.log(`${alterWert} → ${neuerWert}`);
    },
    { immediate: true },
);

Die Konsole zeigt undefined → Anna, sobald die App startet: Beim ersten Durchlauf gibt es noch keinen alten Wert. Wenn der Name zu Ben wechselt, zeigt sie Anna → Ben. Du kannst auch beide Optionen auf einmal angeben: { deep: true, immediate: true }.

Die App in dieser Übung hat einen Dunkelmodus. Die Checkbox schaltet ihn um, und die App merkt sich die Wahl schon. localStorage speichert nur Text, also wird true als "true" gespeichert, und === "true" macht beim Start der App wieder true oder false daraus.

Der Dunkelmodus färbt die ganze Seite, also den <body>, und der <body> steht nicht in der Vorlage der Komponente: Die App lebt in <div id="app">. Also kommt :class nicht an ihn heran, und ein Watcher muss die Klasse selbst hinzufügen und entfernen, mit document.body.classList, wie im JavaScript-Kurs.

watchEffect. Vue hat noch eine Art Watcher, watchEffect(). Du gibst ihm nur die Funktion. Sie läuft sofort und erneut, wann immer sich ein Ref ändert, das sie liest, so wie ein berechneter Wert neu berechnet wird:

watchEffect(() => {
    console.log(`Dunkelmodus: ${dunkel.value}`);
});

Das ist kürzer, aber man sieht nicht auf einen Blick, was beobachtet wird. Dieser Kurs verwendet watch().

Berechneter Wert oder Watcher? Wenn du einen Wert zum Anzeigen brauchst, nimm einen berechneten Wert: Er gibt den Wert zurück, und Vue hält ihn aktuell. Wenn etwas passieren soll, weil sich ein Wert geändert hat, etwa ihn zu speichern, nimm einen Watcher. Ein Watcher, der nur ein anderes Ref setzt, wie in watch(bestellung, () => { summe.value = … }), sollte stattdessen ein berechneter Wert sein.