Entendiendo los Lifecycle Hooks en Vue.js

Si estás desarrollando aplicaciones Vue y te preguntas cuándo obtener datos, liberar recursos o interactuar con el DOM, necesitas entender los lifecycle hooks. Estos hooks son la columna vertebral del comportamiento de los componentes en Vue 3, sin embargo, muchos desarrolladores tienen dificultades para saber qué hook usar y cuándo.

Este artículo explica los lifecycle hooks de Vue 3 utilizando la Composition API, cubriendo cada fase desde la creación del componente hasta su destrucción con ejemplos prácticos que puedes aplicar inmediatamente.

El Hook Setup: El Punto de Entrada de tu Componente

El hook setup es la piedra angular de la Composition API de Vue 3, reemplazando tanto beforeCreate como created de Vue 2. Se ejecuta antes de que la instancia del componente esté completamente inicializada, convirtiéndolo en el lugar perfecto para definir el estado reactivo y componer la lógica de tu componente.

import { ref, reactive } from 'vue'

export default {
  setup(props, context) {
    const count = ref(0)
    const user = reactive({ name: '', email: '' })
    
    // Logic runs immediately, before template compilation
    console.log('Component initializing')
    
    return { count, user }
  }
}

A diferencia de la Options API de Vue 2, la función setup recibe props y context como parámetros, dándote acceso directo a las propiedades del componente sin usar this.

Fase de Montaje: onBeforeMount y onMounted

onBeforeMount() - Preparación Pre-DOM

El hook onBeforeMount se dispara después de setup pero antes de que el DOM del componente sea creado. Úsalo para operaciones que necesitan ocurrir antes del renderizado pero que no requieren acceso al DOM.

import { onBeforeMount } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // Initialize non-DOM dependent resources
      console.log('Template compiled, DOM not yet created')
    })
  }
}

onMounted() - Operaciones con el DOM Listo

onMounted es donde ocurre la mayor parte de la inicialización relacionada con el DOM. La plantilla del componente ha sido renderizada e insertada en el documento, haciendo seguro acceder a los elementos e inicializar bibliotecas de terceros.

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const chartContainer = ref(null)
    
    onMounted(async () => {
      // Fetch data after component mounts
      const data = await fetch('/api/data').then(r => r.json())
      
      // Initialize chart library with DOM element
      // Assuming Chart is imported from a charting library
      new Chart(chartContainer.value, { data })
    })
    
    return { chartContainer }
  }
}

Fase de Actualización: Cambios en el Estado Reactivo

onBeforeUpdate() - Lógica Pre-renderizado

Cuando los cambios en los datos reactivos desencadenan un re-renderizado, onBeforeUpdate se ejecuta primero. Es tu última oportunidad para leer el estado actual del DOM antes de que Vue lo actualice.

import { onBeforeUpdate } from 'vue'

export default {
  setup() {
    onBeforeUpdate(() => {
      // Capture current scroll position before DOM updates
      const scrollY = window.scrollY
      // Store or use scrollY as needed
    })
  }
}

onUpdated() - Operaciones Post-renderizado

Después de que Vue actualiza el DOM, onUpdated se dispara. Ten cuidado aquí—modificar el estado reactivo puede causar bucles infinitos.

import { onUpdated } from 'vue'

export default {
  setup() {
    onUpdated(() => {
      // DOM has been updated
      // Use nextTick() for specific state change reactions
      console.log('Component re-rendered')
    })
  }
}

Fase de Desmontaje: Limpieza del Componente

onBeforeUnmount() - Tareas Pre-limpieza

Antes de que un componente sea removido, onBeforeUnmount te da acceso al componente completamente funcional una última vez.

import { onBeforeUnmount, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ data: 'important info' })
    
    onBeforeUnmount(() => {
      // Save component state or notify external systems
      localStorage.setItem('lastState', JSON.stringify(state))
    })
    
    return { state }
  }
}

onUnmounted() - Limpieza de Recursos

onUnmounted es crucial para prevenir fugas de memoria. Limpia event listeners, temporizadores y suscripciones aquí.

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let timer
    
    const handleResize = () => {
      console.log('Window resized')
    }
    
    onMounted(() => {
      timer = setInterval(() => {
        console.log('Polling...')
      }, 1000)
      
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      clearInterval(timer)
      window.removeEventListener('resize', handleResize)
    })
  }
}

Patrones Prácticos y Mejores Prácticas

Recuerda estos puntos clave al trabajar con los métodos de lifecycle de Vue 3:

1. Siempre importa los hooks desde ‘vue’ antes de usarlos
2. Llama a los hooks de forma síncrona dentro de setup()—no en callbacks o promesas
3. Migración de Vue 2 a Vue 3: beforeDestroy ahora es onBeforeUnmount, destroyed es onUnmounted
4. Renderizado del lado del servidor: Los hooks de montaje y actualización no se ejecutan durante SSR

Para probar componentes con lifecycle hooks, usa Vue Test Utils para disparar y verificar apropiadamente el comportamiento de los hooks.

Conclusión

Los lifecycle hooks de la Composition API de Vue 3 proporcionan control preciso sobre el comportamiento de tu componente en cada etapa. Al entender cuándo se dispara cada hook y qué recursos están disponibles, puedes escribir componentes más limpios y eficientes. Comienza con setup() para la inicialización, usa onMounted() para operaciones del DOM, y siempre limpia en onUnmounted() para prevenir fugas de memoria.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.