Computed y watch en Composition API
computed() para estado derivado, y watch() y watchEffect() para efectos secundarios.
Computed y watch en Composition API es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Derivar y reaccionar al estado
El estado reactivo es solo una parte de la historia. También necesita derivar nuevos valores a partir de él y reaccionar a los cambios. Composition API ofrece computed, watch y watchEffect para ello.
computed para valores derivados
computed() recibe una función getter y devuelve un ref cuyo valor se deriva de otro estado reactivo. En JS se accede a él mediante .value; en la plantilla se desenvuelve automáticamente.
import { ref, computed } from 'vue'
const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4computed es diferido y usa caché
Un computed solo se recalcula cuando cambia una de sus dependencias reactivas. Si lo lee diez veces sin que haya cambios, el getter se ejecuta una vez y se reutiliza el resultado almacenado en caché.
Esto hace que computed sea ideal para derivaciones costosas.
computed se actualiza automáticamente
Cambie una dependencia y computed se actualizará la próxima vez que se lea. Nunca tiene que llamarlo manualmente.
const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10watch para efectos secundarios
watch() observa una fuente reactiva y ejecuta una devolución de llamada cuando cambia. La devolución de llamada recibe el valor nuevo y el valor anterior.
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('changed from', oldVal, 'to', newVal)
})watch es diferido de forma predeterminada
A diferencia de computed, watch no ejecuta su devolución de llamada inmediatamente. Espera al primer cambio. Utilícelo para efectos secundarios: registrar información, obtener datos o guardar en el almacenamiento.
Observar varias fuentes
Pase un array de fuentes para observar varios valores a la vez. La devolución de llamada recibe arrays con los valores nuevos y anteriores.
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, newName)
})Observar un getter
Para observar una propiedad de un objeto reactivo, pase una función getter. Observar directamente el objeto solo se activa con cambios profundos, lo que puede resultar inesperado.
const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
console.log('count is', newVal)
})watchEffect: ejecución inmediata y seguimiento automático
watchEffect() ejecuta su función inmediatamente y vuelve a ejecutarla cada vez que cambia cualquier valor reactivo utilizado en ella. No tiene que enumerar las dependencias; se rastrean automáticamente.
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log('count is', count.value)
})
// logs immediately, then on every changewatch frente a watchEffect
watch: fuente explícita, ejecución diferida y acceso a los valores anterior y nuevo.watchEffect: rastrea automáticamente las dependencias, se ejecuta de forma inmediata y no permite acceder al valor anterior.
Utilice watch cuando necesite el valor anterior o quiera un control preciso. Utilice watchEffect para efectos secundarios reactivos rápidos.
computed frente a watch
Utilice computed cuando necesite un nuevo valor derivado. Utilice watch o watchEffect cuando quiera realizar una acción en respuesta a un cambio. No utilice watch para volver a calcular un valor: para eso existe computed.
Comprobación rápida
Elija la utilidad reactiva adecuada.
Resumen
Ahora sabe cómo derivar valores y reaccionar a los cambios:
computedcrea valores derivados con evaluación diferida y almacenados en caché.watchreacciona a una fuente específica y proporciona los valores nuevo y anterior; su ejecución es diferida.watchEffectse ejecuta de inmediato y rastrea las dependencias automáticamente.- Utilice computed para los valores y watch/watchEffect para los efectos secundarios.
Preguntas frecuentes
¿La lección «Computed y watch en Composition API» es gratis?
Sí — el texto completo de «Computed y watch en Composition API» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Computed y watch en Composition API»?
computed() para estado derivado, y watch() y watchEffect() para efectos secundarios. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Computed y watch en Composition API»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- ¿Por qué Composition API?
- Función setup() y variables reactivas
- ref frente a reactive: cuándo usar cada uno
- Computed y watch en Composition API