Qual è la differenza tra watch e watchEffect?

Question

Accepted Answer

Entrambi eseguono side effect in risposta a cambiamenti reattivi, ma differiscono nel modo in cui vengono specificate le dipendenze e quali informazioni forniscono. Usali per side effect (chiamate API, logging, manipolazione manuale del DOM) — **non** per derivare valori (quello è `computed`). ## watch — sorgente esplicita, fornisce valori vecchi + nuovi ```vue ``` `watch` osserva una sorgente **specifica** che nomini, esegue il callback solo quando quella sorgente cambia, e fornisce i valori **vecchi e nuovi** — utile quando devi confrontarli o reagire a un particolare pezzo di stato. ## watchEffect — tracciamento automatico delle dipendenze, esecuzione immediata ```vue ``` `watchEffect` **traccia automaticamente** ogni valore reattivo usato al suo interno (nessuna lista di sorgenti), e si esegue **immediatamente al setup** (poi si riesegue a ogni cambio di dipendenza). Nessun valore vecchio/nuovo. ## Confronto affiancato ```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 ``` ## Opzioni utili di 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 ``` ## Perché è importante Scegliere lo strumento giusto mantiene i side effect reattivi puliti: usa **`computed`** per valori derivati, **`watch`** quando hai bisogno di reagire a una sorgente specifica o confrontare vecchio/nuovo (ad es. fetch quando un id cambia), e **`watchEffect`** per effetti che dipendono da più valori e dovrebbero tracciarveli automaticamente. Abusare dei watcher per derivazione (invece di `computed`) è un anti-pattern comune.