Sledování od začátku

Sledování se spustí jen po změně, ne při spuštění aplikace. Obvykle je to tak správně: jméno, které se právě přečetlo, není potřeba hned ukládat. Některé vedlejší efekty jsou ale potřeba i od začátku. Pro ně je další volba, { immediate: true }. Sledování se pak spustí jednou hned při spuštění aplikace a pak po každé změně, stejně jako předtím:

const jmeno = ref("Anna");

watch(
    jmeno,
    (novaHodnota, staraHodnota) => {
        console.log(`${staraHodnota} → ${novaHodnota}`);
    },
    { immediate: true },
);

Konzole ukáže undefined → Anna, hned jak se aplikace spustí: při prvním spuštění žádná stará hodnota ještě není. Když se jméno změní na Petr, ukáže Anna → Petr. Obě volby můžete dát i najednou: { deep: true, immediate: true }.

Aplikace v tomto cvičení má tmavý režim. Zaškrtávací políčko ho zapíná a vypíná a aplikace si volbu už pamatuje. localStorage uchovává jen text, takže se true uloží jako "true" a === "true" to při spuštění aplikace převede zpátky na true, nebo false.

Tmavý režim obarví celou stránku, tedy <body>, a <body> v šabloně komponenty není: aplikace žije uvnitř <div id="app">. Pomocí :class se k němu proto nedostanete a třídu musí přidat a odebrat sledování samo, pomocí document.body.classList, jako v kurzu JavaScriptu.

watchEffect. Vue má ještě jeden druh sledování, watchEffect(). Dáte mu jen funkci. Ta se spustí hned a pak znovu pokaždé, když se změní ref, který čte, podobně jako se přepočítává vypočítaná hodnota:

watchEffect(() => {
    console.log(`Tmavý režim: ${tmavy.value}`);
});

Je to kratší, ale na první pohled není vidět, co sleduje. Tento kurz používá watch().

Vypočítaná hodnota, nebo sledování? Když potřebujete hodnotu, kterou stránka ukáže, použijte vypočítanou hodnotu: vrátí hodnotu a Vue ji udržuje aktuální. Když se má něco stát, protože se hodnota změnila, třeba se má uložit, použijte sledování. Sledování, které jen nastaví jiný ref, třeba watch(objednavka, () => { celkem.value = … }), by mělo být vypočítanou hodnotou.