Jaký je rozdíl mezi watch a watchEffect?

Question

Accepted Answer

Oba spouštějí side effects v reakci na reaktivní změny, ale liší se v tom, jak specifikují závislosti a jaké vám informace poskytují. Používejte je pro side effects (volání API, logging, ruční práci s DOM) — **ne** pro odvozování hodnot (to je `computed`). ## watch — explicitní zdroj, poskytuje staré i nové hodnoty ```vue ``` `watch` sleduje **specifický** zdroj, který pojmenujete, spustí callback pouze když se tento zdroj změní, a poskytuje **staré i nové hodnoty** — užitečné, když je potřebujete porovnat nebo reagovat na jednu konkrétní část stavu. ## watchEffect — automatické sledování závislostí, běží okamžitě ```vue ``` `watchEffect` **automaticky sleduje** každou reaktivní hodnotu použitou v jeho těle (bez seznamu zdrojů) a běží **okamžitě při nastavení** (pak se spustí znovu při jakékoli změně závislosti). Bez starých/nových hodnot. ## Vedle sebe ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## Užitečné možnosti watch ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## Proč na tom záleží Volba správného nástroje udržuje reaktivní side effects čisté: použijte **`computed`** pro odvozené hodnoty, **`watch`** pokud potřebujete reagovat na specifický zdroj nebo porovnávat staré/nové (např. fetch když se změní id), a **`watchEffect`** pro effects, které závisí na více hodnotách a měly by je sledovat automaticky. Nesprávné používání watchers pro odvozování (místo `computed`) je běžný anti-pattern.