Watchers

En Vue.js hay tres herramientas muy usadas para reaccionar automáticamente a cambios en tus datos: watch, watchEffect y computed. Veámoslas fácil:

📌 Computed

Es como una calculadora automática.

Imagina que tienes dos números y quieres obtener la suma siempre actualizada.
Si cambian esos números, la suma se recalcula automáticamente.
Computed siempre devuelve un valor.

Ejemplo simplificado:

const numero1 = ref(2);
const numero2 = ref(3);

const suma = computed(() => {
  return numero1.value + numero2.value;
});

// suma.value será 5

Si cambias numero1 o numero2, suma.value cambia automáticamente.

📌 Watch

Es como un vigilante 👀.

Observa un dato específico y realiza una acción cuando cambia.
NO devuelve un valor, sólo ejecuta una función cuando detecta cambios.

Ejemplo sencillo:

const nombre = ref("Juan");

watch(nombre, (nuevoValor, valorAnterior) => {
  console.log(`El nombre cambió de ${valorAnterior} a ${nuevoValor}`);
});

Si cambias nombre.value, se ejecutará automáticamente el watch y mostrará el mensaje en consola.

📌 WatchEffect

Es parecido a watch pero es más automático aún.

Observa automáticamente TODOS los datos que uses dentro de su función.
No necesitas indicar qué observar, él detecta solo lo que cambia y ejecuta su función.

Ejemplo sencillo:

const apellido = ref("Perez");
const edad = ref(20);

watchEffect(() => {
  console.log(`El usuario es ${apellido.value} y tiene ${edad.value} años.`);
});

Cada vez que cambie apellido o edad, automáticamente se vuelve a ejecutar la función.

🧐 ¿En qué se diferencian entonces?

Herramienta	¿Para qué se usa?	¿Devuelve valor?	¿Qué observa?
`computed`	Calcular valores automáticamente	✅ Sí	Lo que uses dentro de su función
`watch`	Ejecutar una acción cuando algo específico cambie	❌ No	Solo lo que explícitamente le indiques
`watchEffect`	Ejecutar una acción cuando algo cambie, detectando automáticamente qué cambia	❌ No	Todo lo que uses dentro de su función

🗒️ ¿Cuál elegir?

Usa computed cuando quieras calcular valores automáticos basados en otros datos.
Usa watch cuando necesites reaccionar claramente a un cambio específico.
Usa watchEffect cuando quieras que Vue detecte automáticamente qué cambios afectan a una acción.

Espero que esta explicación sencilla te haya ayudado a entenderlo mejor. ¡Cualquier duda extra, dime! 🚀