En el desarrollo con Vue.js, cada componente atraviesa una secuencia de etapas desde su instanciación hasta su eliminación del árbol de nodos. A este proceso se le denomina ciclo de vida. Durante estas fases, el framework expone funciones específicas conocidas como "hooks" o ganchos, los cuales se vinculan automáticamente al contexto de la instancia (this). Estos hooks permiten interceptar momentos críticos para inyectar lógica personalizada, como la preparación de datos, la manipulación del DOM o la liberación de recursos.
A continuación, se detalla un ejemplo práctico de un componente estructurado que implementa algunos de estos ganchos fundamentales:
<template>
<section class="product-list">
<HeaderMenu />
</section>
</template>
<script>
import HeaderMenu from "./components/HeaderMenu.vue";
export default {
name: "ProductCatalog",
components: { HeaderMenu },
beforeCreate() {
console.log("[ProductCatalog] Preparando entorno de inicialización...");
},
created() {
console.log("[ProductCatalog] Sistema reactivo y estado configurados correctamente.");
},
updated() {
console.log("[ProductCatalog] Interfaz sincronizada tras una mutación de datos.");
},
beforeDestroy() {
console.log("[ProductCatalog] Iniciando protocolo de limpieza.");
}
};
</script>
- beforeCreate
Se ejecuta inmediatamente después de inicializar la instancia del componente. En esta etapa inicial, los mecanismos de reactividad (observación de datos) y la configuración de los eventos o watchers aún no han sido procesados por el framwork.
- created
Invocado una vez que la instancia ha sido construida por completo. En este punto, ya se ha configurado la observación de datos, las propiedades computadas y los métodos. Es común utilizarlo para realizar peticiones HTTP iniciales. Sin embargo, el proceso de montaje en el DOM no ha comenzado, por lo que la propiedad $el todavía no está disponible.
- beforeMount
Este gancho se dispara justo antes de que comience la fase de montaje del componente en el documento HTML.
- mounted
El componente ha sido insertado exitosamente en el DOM y la propiedad el ha sido reemplazada por el elemento vm.$el recién generado. Es importante destacar que este evento no garantiza que todos los componentes hijos hayan terminado su propio proceso de montaje. Si tu lógica requiere que el árbol completo esté renderizado, debes encapsularla dentro de vm.$nextTick:
mounted() {
this.$nextTick(() => {
// Este bloque se ejecuta únicamente cuando todo el DOM está disponible
this.initializeUIComponents();
});
}
- beforeUpdate
Se activa cuando el estado reactivo sufre mutaciones, inmediatamente antes de que el Virtual DOM aplique los parches necesarios. Es un momento oportuno para acceder al estado actual del DOM antes de que sea modificado por Vue, lo cual es útil para eliminar listeners manuales. No se ejecuta durante el renderizado del lado del servidor (SSR).
- updated
Este hook se llama después de que un cambio en los datos ha provocado que el Virtual DOM se re-renderice y aplique actualizaciones en el DOM real. Puedes realizar operaciones dependientes del DOM aquí. No obstante, se debe evitar estrictamente alterar el estado reactivo dentro de este método para prevenir bucles de actualización infinitos; para reaccionar a cambios, es preferible usar watchers o propiedades computadas.
- activated
Diseñado específicamente para componentes encapsulados dentro de la etiqueta <keep-alive>. Se ejecuta cada vez que el componente en caché vuelve a activarse y hacerse visible en la interfaz.
- deactivated
Complementario al anterior, este hook se invoca cuando un componente dentro de <keep-alive> es desactivado y ocultado, conservando su estado en memoria.
- beforeDestroy
Se llama justo antes de que la instancia sea desmantelada. En este instante, el componente matniene toda su funcionalidad intacta. Es la fase idónea para ejecutar tareas de limpieza, como detener intervalos de tiempo, cancelar suscripciones o desconectar sockets.
- destroyed
Invocado después de que la instancia ha sido completamente eliminada. Al llegar a este punto, todas las directivas han sido desvinculadas, los event listeners eliminados y los componentes hijos destruidos.
- errorCaptured
Introducido en la versión 2.5.0, este hook permite capturar errores no manejados que provienen de cualquier componente descendiente en el árbol. Recibe tres argumentos: el objeto de error, la instancia del componente que originó la excepción y un string con información sobre el origen. Si la función retorna false, se detendrá la propagación del error hacia componentes superiores.