Hooks del ciclo de vida en Vue.js

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:38

Hooks del ciclo de vida en Vue.js

Curso Profesional de Vue.js 2

Clase 26 de 53

Clase 26 / 53

Recursos

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.