Los componentes que definimos en Vue.js tienen un ciclo de vida, durante éste, podemos acceder a varias funciones (hooks) y, con ellos, ejecutar el código que queremos en ciertos puntos del ciclo de vida del componente.
Por ejemplo, podremos ejecutar código antes de que el componente se añada al DOM y/o cuando ya esté añadido, también antes de que se elimine, entre otras opciones más. Ahora lo vemos!
Los hooks por los que puede pasar la instancia de Vue.js o un componente de Vue.js son (sacado de la documentación):
- beforeCreate: se ejecuta justo después de la inicialización de la instancia.
- created: se ejecuta cuando la instancia y los eventos, las computed properties, el data y los métodos están creados. Normalmente se utiliza para inicializar propiedades del objeto data con consultas HTTP Get.
- beforeMount: se ejecuta justo antes de que se añada al DOM.
- mounted: se ejecuta después de añadirlo al DOM. Se puede utilizar para inicializar librerías que dependan del DOM.
- beforeUpdate: se ejecuta cuando el data cambia, pero el DOM aun no ha plasmado los cambios.
- updated: se ejecuta después de que el data cambie y el DOM muestre estos cambios.
- beforeDestroy: se ejecuta justo antes de eliminar la instancia.
- destroyed: se ejecuta cuando la instancia, los eventos, directivas e hijos del componente se han eliminado.
Hay más hooks que puedes ver en la documentación.
También en este enlace puedes ver un diagrama donde se explica visualmente el ciclo de vida de un componente de Vue.js.
Aquí puedes ver un ejemplo hecho a partir del ejemplo del post #4, fíjate en la consola y verás los logs que tienen los hooks como se van ejecutando según los puntos del ciclo de vida donde se encuentra el componente en ese momento. Puedes crear una nueva tarea y verás como se ejecuta el hook beforeCreate, el created, el beforeMount y el mounted. Si eliminas una tarea verás que se ejecuta el beforeDestroy y el destroyed. Si cambias de estado la tarea (de hecha a no hecha o al revés) verás que se ejecuta el beforeUpdate y el updated:
See the Pen Vue.js 2 #5 by vreaxe (@vreaxe) on CodePen.
-
– https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
– https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
– https://elabismodenull.wordpress.com/2017/05/05/vuejs-el-ciclo-de-vida-de-un-componente/
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR