Vue 14: watch vs watchEffect
easy⏱ 5 mincoursevue
Fuente explícita vs auto-tracking
Usa watch cuando necesites el valor anterior para comparar, quieras observar una fuente que NO se lee dentro del cuerpo del callback, o quieras control fino sobre CUÁNDO empieza (es perezoso por defecto). Usa watchEffect cuando tu lógica simplemente necesite 'volver a ejecutarse cuando cualquiera de estos valores cambie' y te parezca bien que se dispare inmediatamente — es más corto y descubre sus propias dependencias automáticamente, igual que un computed.
import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
// Explicit source + old/new values, NOT called immediately:
watch(count, (newVal, oldVal) => {
console.log('count: ' + oldVal + ' -> ' + newVal);
});
// Auto-tracked, runs immediately AND on every future change:
watchEffect(() => {
console.log('count is currently', count.value);
});
Compara los dos registros en vivo
Escribe algunos caracteres y luego bórralos. Nota que watchEffect registró una entrada incluso antes de que tocaras el input — esa es su primera ejecución inmediata. Prueba cambiar watch(search, ...) a watch(search, ..., { immediate: true }) y observa cómo se comporta como watchEffect al montar.