¿Qué es el ciclo de vida de Vue?

El ciclo de vida de Vue.js se refiere al proceso completo que ocurre desde la creación hasta la destrucción de una instancia de componente. Cada componente Vue pasa por una serie de fases durante su existencia, permitiendo a los desarrolladores ejecutar código en momentos específicos mediante los llamados "ganchos de ciclo de vida" (lifecycle hooks).

Fases del Ciclo de Vida

1. Inicialización y Montaje

• beforeCreate(): Se ejecuta antes de que se cree la intsancia del componente
• created(): Se ejecuta después de que se crea la instancia pero antes de montarse en el DOM
• beforeMount(): Se ejecuta antes de que el componente se monte en el DOM
• mounted(): Se ejecuta después de que el componente se ha montado en el DOM

2. Actualización de Datos

• beforeUpdate(): Se ejecuta antes de que los cambios en los datos actualicen el DOM
• updated(): Se ejecuta después de que los cambios en los datos han actualiazdo el DOM

3. Destrucción

• beforeDestroy(): Se ejecuta antes de que la instancia del componente sea destruida
• destroyed(): Se ejecuta después de que la instancia del componente ha sido destruida

Uso de Ganchos de Ciclo de Vida

En la API de Composition, podemos registrar ganchos de ciclo de vida como onMounted:

<script setup="">
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`El componente ha sido montado correctamente.`)
})
</script>

Métodos Comunes por Fase

Gancho mounted()

Este es el lugar ideal para realizar tareas asíncronas como:

• Enviar peticiones AJAX para obtener datos iniciales
• Configurar temporizadores (setInterval, setTimeout)
• Vincular eventos personalizados
• Suscribirse a servicios de mensajería

Gancho beforeDestroy()

Úsalo para realizar tareas de limpieza:

• Limpiar temporizadores
• Desvincular eventos personalizados
• Cancelar suscripciones a servicios

Puntos Importantes

• Los nombres de los ganchos de ciclo de vida son inmutables, pero su contenido puede ser definido por el desarrollador según las necesidades
• En los ganchos de ciclo de vida, this siempre hace referencia a la instancia del componente o al objeto Vue
• Al destruir un componante:
• Con las herramientas de desarrollo de Vue, no se verá información alguna después de la destrucción
• Los eventos personalizados dejarán de funcionar, pero los eventos nativos del DOM seguirán activos
• No es recomendable manipular datos en beforeDestroy porque no se activará el flujo de actualización

Ejemplo Práctico

<script>
// Creación de una instancia de Vue
const aplicacionVue = new Vue({
  el: '#app', // Selector CSS para el contenedor del componente
  data: { // Datos que serán renderizados en la vista
    usuario: 'Alex',
    ubicacion: 'Madrid'
  },
  // Ganchos de ciclo de vida
  beforeCreate() {
    console.log("Ejecutando beforeCreate");
  },
  created() {
    console.log("Ejecutando created");
  },
  beforeMount() {
    console.log("Ejecutando beforeMount");
  },
  mounted() {
    // El componente Vue está completamente listo
    console.log("Ejecutando mounted");
  },
  beforeUpdate() {
    console.log("Ejecutando beforeUpdate");
  },
  updated() {
    console.log("Ejecutando updated");
  },
  beforeDestroy() {
    console.log("Ejecutando beforeDestroy");
    alert("Componente a punto de ser destruido");
  },
  destroyed() {
    console.log("Ejecutando destroyed");
    alert("Componente destruido");
  }
});
</script>