Vue 10: Watchers (observadores)
easy⏱ 5 mincoursevue
watch vs. computed
computed deriva y devuelve un valor de forma síncrona, pensado para leerse en el template. watch no devuelve nada — existe puramente para ejecutar efectos secundarios (logging, timers, llamadas a APIs, sincronizar con localStorage) en reacción a un cambio. Recurrí a computed cuando necesitás un valor; recurrí a watch cuando necesitás hacer algo.
// computed: derives a value, no side effects
const fullName = computed(() => first.value + ' ' + last.value);
// watch: reacts to a change with a side effect
watch(first, (newVal, oldVal) => {
console.log('first changed from', oldVal, 'to', newVal);
});
Debounce con watch
Cada vez que el source observado cambia, cancelá el setTimeout anterior antes de programar uno nuevo — así, solo el último cambio dentro de la ventana de espera realmente dispara el trabajo costoso, en vez de ejecutarlo en cada tecla.
let timer = null;
watch(query, (newQuery) => {
clearTimeout(timer);
timer = setTimeout(() => {
runExpensiveSearch(newQuery);
}, 400);
});
Construí la caja de búsqueda con debounce
Creá un ref query enlazado con v-model, y un watch(query, ...) que aplique debounce con setTimeout/clearTimeout antes de filtrar una lista de paquetes. Agregá una computed resultCount para mostrar cuántos coincidieron.