¿Cuál es la diferencia entre watch y watchEffect?

Question

Accepted Answer

Ambos ejecutan side effects en respuesta a cambios reactivos, pero difieren en cómo se especifican las dependencias y qué información te proporcionan. Úsalos para side effects (llamadas API, logging, trabajo manual del DOM) — **no** para derivar valores (eso es `computed`). ## watch — fuente explícita, proporciona valores antiguos + nuevos ```vue ``` `watch` observa una **fuente específica** que nombras, ejecuta el callback solo cuando esa fuente cambia, y proporciona los **valores antiguos y nuevos** — útil cuando necesitas compararlos o reaccionar a una pieza particular del estado. ## watchEffect — rastreo automático de dependencias, se ejecuta inmediatamente ```vue ``` `watchEffect` **rastrea automáticamente** cada valor reactivo usado en su interior (sin lista de fuentes) y se ejecuta **inmediatamente en la configuración** (luego se vuelve a ejecutar en cualquier cambio de dependencia). Sin valores antiguos/nuevos. ## Lado a lado ```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 ``` ## Opciones útiles de 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 ``` ## Por qué es importante Elegir la herramienta correcta mantiene los side effects reactivos limpios: usa **`computed`** para valores derivados, **`watch`** cuando necesites reaccionar a una fuente específica o comparar antiguos/nuevos (p. ej. fetch cuando cambia un id), y **`watchEffect`** para efectos que dependen de varios valores y deberían rastrearlos automáticamente. Usar mal los watchers para derivación (en lugar de `computed`) es un anti-pattern común.