0Pricing
Frontend Academy · Lección

computed() y watch()

Derive valores de forma diferida con computed(), reaccione a cambios de estado con watch() y watchEffect(), y controle el momento del flush.

computed() y watch() es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

computed() en la Composition API

computed(fn) crea una ref reactiva de solo lectura que deriva su valor de otras fuentes reactivas. Se almacena en caché; el getter solo se ejecuta cuando cambian sus dependencias.

<script setup>
import { ref, computed } from 'vue';

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

computed() modificable

Pase un objeto con get y set para crear una computed modificable. El setter gestiona las actualizaciones y normalmente refleja el cambio en la ref de origen.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

Conceptos básicos de watch()

watch(source, callback) ejecuta el callback cuando cambia la fuente. El callback recibe los valores nuevo y anterior.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

Observar una ref frente a reactive

Observe una ref directamente. Para observar una propiedad reactiva, use una función getter () => state.prop.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Watch profundo

Pase { deep: true } para observar cambios anidados en una ref de objeto.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Watch inmediato

Pase { immediate: true } para ejecutar el callback inmediatamente durante la configuración, antes de cualquier cambio. Resulta útil cuando desea ejecutar un efecto secundario con el valor inicial.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn) ejecuta el callback inmediatamente y vuelve a ejecutarlo cada vez que cambia cualquier dependencia reactiva utilizada en él. No es necesario especificar las fuentes explícitamente.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect frente a watch

watchEffect: inmediato, realiza un seguimiento automático de las dependencias y no permite acceder al valor anterior. watch: fuentes explícitas, diferido de forma predeterminada y permite acceder a los valores anterior y nuevo. Use watchEffect para efectos secundarios declarativos; use watch cuando necesite controlar cuándo y con qué frecuencia se ejecuta.

Detener watchers

Tanto watch como watchEffect devuelven una función de detención. Llámela para dejar de observar. En