Vue Academy · Lección

onUnmounted y patrones de limpieza

Borrado de intervalos, eliminación de listeners de eventos y cancelación de solicitudes en onUnmounted.

onUnmounted y patrones de limpieza 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.

Limpiar lo que inicia

Cuando se elimina un componente, todo lo que haya iniciado —temporizadores, listeners, suscripciones y solicitudes de red— sigue ejecutándose a menos que lo detenga. El hook onUnmounted es el lugar donde debe realizar la limpieza para evitar fugas de memoria y errores.

El hook onUnmounted

onUnmounted se ejecuta después de retirar el componente del DOM. Es la última oportunidad para liberar recursos.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Patrón: borrar intervalos

Si inicia un intervalo en onMounted, bórrelo en onUnmounted. De lo contrario, la función de devolución de llamada seguirá ejecutándose después de que desaparezca el componente y a menudo fallará al intentar acceder a un estado inexistente.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Patrón: eliminar listeners de eventos

Los listeners globales de window o document sobreviven a la eliminación del componente. Empareje siempre addEventListener con removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Patrón: cancelar solicitudes fetch

Una solicitud pendiente que se resuelve después del desmontaje puede establecer el estado de un componente que ya no existe. Use un AbortController para cancelarla durante la limpieza.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Patrón: cancelar suscripciones

Las suscripciones a stores, sockets o buses de eventos deben cancelarse. Guarde la función para cancelar la suscripción y llámela en onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch devuelve una función para detenerse

Al llamar a watch se devuelve una función que lo detiene. Los watchers creados durante setup se detienen automáticamente, pero los creados más adelante (por ejemplo, dentro de otra función de devolución de llamada) deben detenerse manualmente.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

Función de limpieza de watchEffect

Dentro de watchEffect recibe una función onCleanup para realizar la limpieza antes de la siguiente ejecución o al detenerse. Así se mantienen ordenados los recursos de cada ejecución.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Por qué es importante la limpieza

Omitir la limpieza provoca fugas de memoria (recursos que nunca se liberan), listeners duplicados (varios montajes se acumulan) y errores (funciones de devolución de llamada que acceden a un estado destruido). El código limpio siempre deshace lo que configura.

Los composables lo hacen automáticamente

Los composables bien escritos registran su propia limpieza en onUnmounted. Por eso los composables de VueUse, como useEventListener, eliminan el listener por usted: la limpieza está integrada.

Lista de comprobación de limpieza

setInterval/setTimeout -> bórrelos.
addEventListener -> elimínelo.
fetch -> cancélelo con AbortController.
suscripciones -> llame a unsubscribe.
watchers manuales -> llame a la función stop devuelta.

Comprobación rápida

Compruebe sus conocimientos sobre la limpieza.

Resumen

Aspectos esenciales de la limpieza:

onUnmounted se ejecuta después de la eliminación; libere aquí los recursos.
Borre intervalos y tiempos de espera, elimine listeners, cancele solicitudes fetch y cancele suscripciones.
watch devuelve una función para detenerse que debe llamar en onUnmounted cuando sea necesario.
watchEffect proporciona una función de devolución de llamada onCleanup para la limpieza de cada ejecución.

Preguntas frecuentes

¿La lección «onUnmounted y patrones de limpieza» es gratis?

Sí — el texto completo de «onUnmounted y patrones de 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «onUnmounted y patrones de limpieza»?

Borrado de intervalos, eliminación de listeners de eventos y cancelación de solicitudes en onUnmounted. 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 «onUnmounted y patrones de 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 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