onDestroy: limpieza
Ejecute la lógica de desmontaje, como borrar temporizadores o cancelar suscripciones, cuando se elimine el componente
onDestroy: limpieza es una lección gratuita de Sveltejs 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 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.
Por qué usar onDestroy
onDestroy se ejecuta cuando se elimina un componente del DOM. Úselo para eliminar escuchadores, temporizadores o suscripciones.
Importar y llamar
Impórtelo desde svelte y pase una función de callback.
<script>
import { onDestroy } from "svelte";
onDestroy(() => console.log("bye"));
</script>Patrón de limpieza
Cancele temporizadores, aborte solicitudes fetch y cancele suscripciones a stores.
onDestroy(() => clearInterval(id));Varios onDestroy
Llámelo tantas veces como sea necesario. Cada función de limpieza se ejecutará.
También se ejecuta en el servidor
A diferencia de onMount, onDestroy se ejecuta en el servidor durante la desmontaje de SSR.
Combinar con onMount
Un patrón habitual consiste en configurar todo en onMount y desmontarlo en onDestroy.
O simplemente devolver una función desde onMount
Devolver una función desde onMount equivale a usar onDestroy para limpiezas sencillas y mantiene el código en el mismo lugar.
Evitar efectos secundarios en destroy
Mantenga la limpieza síncrona y rápida. Es posible que el trabajo asíncrono prolongado no termine antes de la navegación.
Suscripción automática a stores
Si usa la forma abreviada $store, Svelte cancela automáticamente la suscripción al destruir el componente; no necesita usar onDestroy manualmente.
Fugas de memoria
Olvidar la limpieza es la principal fuente de fugas de memoria en las SPA. Elimine siempre los escuchadores globales que haya añadido.
Páginas frente a componentes
Los cambios de ruta destruyen los componentes de página y activan onDestroy. Úselo también para la limpieza específica de cada página.
Comprobación rápida
¿Cuál es la forma más sencilla de vincular la configuración y la limpieza?
Repaso
onDestroy se ejecuta cuando se desmonta el componente. Úselo (o use el valor de retorno de onMount) para limpiar listeners y temporizadores.
Preguntas frecuentes
¿La lección «onDestroy: limpieza» es gratis?
Sí — el texto completo de «onDestroy: limpieza» 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 «onDestroy: limpieza»?
Ejecute la lógica de desmontaje, como borrar temporizadores o cancelar suscripciones, cuando se elimine el componente 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 2 de 4.
¿Cuánto tiempo toma la lección «onDestroy: limpieza»?
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