beforeUpdate y afterUpdate
Conéctese al ciclo de actualización para inspeccionar o modificar el DOM antes y después de los cambios reactivos
beforeUpdate y afterUpdate es una lección gratuita de Sveltejs 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 Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Cuándo se ejecutan
beforeUpdate se ejecuta antes de que las actualizaciones reactivas se apliquen al DOM; afterUpdate se ejecuta inmediatamente después.
Casos de uso
Úselos para leer las medidas del DOM antes de los cambios y ajustar la posición del desplazamiento después.
Desplazamiento automático del chat
Un uso clásico consiste en desplazar automáticamente un chat hasta el final, pero solo cuando el usuario ya se encontraba allí.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});Se ejecutan con frecuencia
Estas funciones de callback se ejecutan en cada actualización. Procure que sean rápidas.
Comportamiento en el servidor
No se ejecutan durante SSR. Trátelas como funciones exclusivas del navegador.
Combínelos con cuidado
El estado que guarde en beforeUpdate puede aplicarse en afterUpdate para implementar patrones de medición y aplicación.
Evítelos para la mayoría de la lógica
La mayor parte de la lógica debe estar en declaraciones reactivas o acciones. Use estas funciones solo para medir el DOM.
Orden de ejecución
Orden en cada actualización: declaraciones reactivas -> beforeUpdate -> actualización del DOM -> afterUpdate.
Primer montaje
Ambas funciones se ejecutan en el primer montaje, además de hacerlo en las actualizaciones posteriores. Tenga en cuenta esta ejecución inicial.
Combínelo con bind:this
Necesita una referencia al elemento del DOM para medirlo. Use bind:this.
Alternativa con tick
Para mediciones puntuales después de un cambio, await tick() puede resultar más legible.
Comprobación rápida
¿Cuándo se ejecuta afterUpdate?
Repaso
beforeUpdate captura el estado previo al cambio; afterUpdate lee o modifica el DOM recién actualizado.
Preguntas frecuentes
¿La lección «beforeUpdate y afterUpdate» es gratis?
Sí — el texto completo de «beforeUpdate y afterUpdate» 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 Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «beforeUpdate y afterUpdate»?
Conéctese al ciclo de actualización para inspeccionar o modificar el DOM antes y después de los cambios reactivos Practicas Sveltejs 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 Sveltejs Academy?
No se requiere experiencia previa. Sveltejs 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 «beforeUpdate y afterUpdate»?
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 Sveltejs Academy?
Sí. Cada lección de Sveltejs 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
- onMount: ejecución después del renderizado
- onDestroy: limpieza
- beforeUpdate y afterUpdate
- tick(): espera de actualizaciones del DOM