Hooks del ciclo de vida en Vue.js

Aprende a dominar el ciclo de vida de los componentes en Vue.js con una guía clara y directa. Entiende qué hace cada hook, en qué orden se ejecuta y cuándo conviene usarlos para trabajar con API REST, acceder al DOM o limpiar recursos. Conoce también la sintaxis corta de ES2015 (ECMAScript 2015) para declarar funciones de manera más simple.

¿Qué es el ciclo de vida en Vue y por qué importa?

Cada componente transita una serie de etapas desde que se crea hasta que se destruye. Algunas son procedurales (suceden una vez) y otras son reiterativas (se repiten mientras el componente vive). Estos momentos se exponen como hooks que permiten ejecutar código antes o después de eventos clave: creación, montaje en el DOM, actualizaciones de la data y destrucción.

• Instancia de Vue: creada en etapas de creación.
• DOM: disponible solo después de montado.
• Orden secuencial: se respeta estrictamente entre hooks.

¿Cuáles son los hooks y qué hace cada uno?

¿Qué pasa en la creación del componente?

• beforeCreate: antes de crear el componente. No hay data inicializada ni DOM disponible.
• created: la instancia de Vue ya existe, se puede acceder a la data y ejecutar lógica, pero el componente aún no está en el DOM. Útil para preparar estado o iniciar peticiones.

¿Qué ocurre al montar en el DOM?

• beforeMount: el componente está compilado y a punto de insertarse, pero todavía no está en el HTML.
• mounted: el componente ya está montado en el DOM. Aquí sí se puede acceder a elementos HTML o a referencias del DOM.

¿Cómo reaccionan a cambios de data?

• beforeUpdate: se ejecuta cuando cambia la data, pero el cambio aún no se refleja en pantalla.
• updated: ocurre después de que el cambio ya se reflejó en la vista. Útil para validar efectos visuales o sincronizaciones tras el render.

¿Cómo y cuándo usar cada hook en el código?

Para un flujo predecible, recuerda: los hooks son secuenciales y se nombran tal como en la documentación. Se escriben como funciones dentro del componente.

¿Cómo se implementan los hooks en el componente?

Usa la sintaxis corta de ES2015 o su forma equivalente. Ambas son válidas.

export default {
  data() {
    return { mensaje: 'Hola Vue' };
  },

  // Sintaxis ES2015 (shorthand)
  created() {
    console.log('created');
    // Ideal para iniciar peticiones HTTP a una API REST.
  },

  mounted() {
    console.log('mounted');
    // Aquí ya puedes acceder al DOM si lo necesitas.
  },

  // Forma equivalente sin shorthand
  // created: function () {
  //   console.log('created');
  // }
};

¿Qué limitaciones considerar en cada etapa?

• created: no existe el DOM; no accedas a elementos HTML.
• mounted: el DOM ya está disponible; puedes leer y manipular elementos.
• beforeUpdate/updated: pensados para reaccionar a cambios de data durante la vida del componente.
• beforeDestroy/destroyed: ideales para limpieza de eventos, temporizadores o conexiones; en destroyed el componente ya no existe, no hay data ni DOM accesible.

¿Qué casos de uso son recomendables?

• created: obtener datos desde API REST mediante peticiones HTTP para optimizar el tiempo de carga antes de montar.
• mounted: trabajar con el DOM (medir elementos, integrar librerías que requieren HTML presente).
• beforeUpdate/updated: coordinar efectos que dependen de cambios visibles en pantalla.
• beforeDestroy/destroyed: liberar recursos y evitar fugas de memoria.

¿Tienes dudas sobre cómo coordinar hooks entre componentes padres e hijos? Comparte tu caso en los comentarios y conversemos soluciones prácticas.