Vue.js: instancias del componente

Un componente en Vue.js atraviesa varias instancias o estados. Vamos a listarlas y comentar un poco por arriba cada una.

• beforeCreate: se ejecuta antes de que se cree el componente.
• created: cuando el componente ya se ha creado, pero aún no existe en el DOM.
• beforeMount: una vez que el componente está creado y compilado y está listo para incluírse en el DOM.
• mounted: el componente ya se encuentra en el DOM.
• beforeUpdate: se ejecuta cuando hay un cambio dentro de nuestra data pero aún no lo vemos reflejado en el DOM.
• updated: el componente ha tenido un cambio dentro de data y ya lo vemos reflejado en el DOM.
• beforeDestroy: se ejecuta cuando el componente está a punto de eliminarse del DOM.
• destroyed: el componente ya no existe en el DOM.

Estas instancias son también conocidas como Hooks, eventos que tiene cada componente que nos permiten ejecutar código en las distintas etapas que atraviesan los mismos.

Podemos ver una gráfica de esto en la documentación oficial de Vue.js.

Ciclo de vida de un componente en Vue.js