Vue Academy · Lección

onUpdated y onBeforeUpdate

Reacción a cambios en datos reactivos y prevención de bucles infinitos de actualización en onUpdated.

onUpdated y onBeforeUpdate es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.

Hooks de las actualizaciones

Cuando cambian los datos reactivos, Vue vuelve a renderizar el componente. Dos hooks delimitan este proceso: onBeforeUpdate se ejecuta antes de aplicar el parche al DOM y onUpdated después.

onUpdated: después del parche

onUpdated se ejecuta cuando el DOM ya se ha actualizado para reflejar el nuevo estado reactivo. En este punto, el DOM renderizado coincide con sus datos.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Leer el DOM actualizado

Como el parche ya se ha aplicado, onUpdated es el lugar adecuado para leer los nuevos tamaños o posiciones de los elementos que dependen del último renderizado.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

La trampa del bucle infinito

No modifique nunca el estado reactivo dentro de onUpdated. Al hacerlo, activa otro renderizado, que vuelve a ejecutar onUpdated, que vuelve a modificar el estado; se crea así un bucle infinito que bloquea la aplicación.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Use watch en su lugar

Si desea reaccionar al cambio de un valor concreto, use watch, no onUpdated. Un watch se centra en una fuente y evita el riesgo de bucle, mientras que onUpdated se ejecuta en cada renderizado.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: antes del parche

onBeforeUpdate se ejecuta después de un cambio reactivo, pero antes de que Vue aplique el parche al DOM. En este punto, el DOM todavía muestra los valores anteriores.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Caso de uso: instantánea previa a la actualización

Como onBeforeUpdate ve el DOM anterior, es perfecto para capturar una instantánea antes del cambio; por ejemplo, registrar la posición de desplazamiento actual para restaurarla después de la actualización.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Se ejecutan en cada renderizado

Ambos hooks se ejecutan en cada ciclo de actualización, que puede ser frecuente. Mantenga ligeras sus funciones de devolución de llamada para evitar problemas de rendimiento.

No son para efectos secundarios de datos

Estos hooks se ocupan del DOM, no de sus datos. Para las reacciones basadas en datos, prefiera computed (para valores derivados) o watch (para efectos secundarios sobre fuentes concretas).

Resumen del orden

Ante un cambio reactivo, la secuencia es: cambia el estado, se ejecuta onBeforeUpdate (DOM anterior), Vue aplica el parche al DOM y, después, se ejecuta onUpdated (DOM nuevo).

Elegir entre ellos

onBeforeUpdate: captura el estado del DOM anterior, como el desplazamiento o la selección.
onUpdated: lee el DOM nuevo después del parche, pero no modifique nunca aquí el estado reactivo.

Comprobación rápida

Compruebe sus conocimientos sobre los hooks de actualización.

Resumen

Resumen de los hooks de actualización:

onUpdated se ejecuta después del parche del DOM; lea aquí los nuevos tamaños.
No modifique nunca el estado reactivo en su interior (provocaría un bucle infinito); use watch en su lugar.
onBeforeUpdate se ejecuta antes del parche, con el DOM anterior; es ideal para capturar instantáneas.
Ambos se ejecutan en cada renderizado, así que manténgalos ligeros.

Preguntas frecuentes

¿La lección «onUpdated y onBeforeUpdate» es gratis?

Sí — el texto completo de «onUpdated y onBeforeUpdate» 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 «onUpdated y onBeforeUpdate»?

Reacción a cambios en datos reactivos y prevención de bucles infinitos de actualización en onUpdated. 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 3 de 4.

¿Cuánto tiempo toma la lección «onUpdated y onBeforeUpdate»?

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

← Volver a Vue Academy