Comprensión de los ganchos del ciclo de vida de Vue.js

Introducción

Los ganchos de ciclo de vida son una ventana a cómo funciona la biblioteca que estás usando detrás de escena. Los ganchos de ciclo de vida te permiten saber cuándo se crea tu componente, se agrega al DOM, se actualiza o se destruye.

Este artículo le presentará los ganchos de creación, montaje, actualización y destrucción en Vue.js.

Prerrequisitos

Para seguir este tutorial, necesitarás:

• Familiaridad con Vue.js. Lea la serie Cómo desarrollar sitios web con Vue.js para obtener más información.

Comprensión de los ganchos de creación (inicialización)

Los ganchos de creación son los primeros que se ejecutan en el componente. Permiten realizar acciones incluso antes de que el componente se haya añadido al DOM. A diferencia de los demás ganchos, los ganchos de creación también se ejecutan durante la representación del lado del servidor.

Utilice ganchos de creación si necesita configurar cosas en su componente, tanto durante la representación del cliente como durante la representación del servidor.

No tendrá acceso al DOM ni al elemento de montaje de destino ( this.$el) dentro de los ganchos de creación.

beforeCreate

El beforeCreategancho se ejecuta durante la inicialización de su componente: datano se ha vuelto reactivo y eventsaún no se ha configurado:

EjemploComponente.vue

scriptexport default {  beforeCreate() {    console.log('At this point, events and lifecycle have been initialized.')  }}/script

En este ejemplo, cuando beforeCreatese ejecuta el gancho, este fragmento registrará el mensaje:

OutputAt this point, events and lifecycle have been initialized.

created

El createdgancho se ejecuta antes de que se hayan montado o renderizado las plantillas y el DOM virtual: puede acceder a los elementos reactivos datay eventsactivos:

EjemploComponente.vue

template  div ref="example-element"{{ propertyComputed }}/div/templatescriptexport default {  data() {    return {      property: 'Example property.'    }  },  computed: {    propertyComputed() {      return this.property    }  },  created() {    console.log('At this point, this.property is now reactive and propertyComputed will update.')    this.property = 'Example property updated.'  }}/script

En este ejemplo, el fragmento se almacenará propertycomo Example property. Cuando createdse ejecute el gancho, se registrará un mensaje:

OutputAt this point, this.property is now reactive and propertyComputed will update.

Y luego propertyse cambia a Example property updated.

Más adelante en el ciclo de vida, {{ propertyComputed }}aparecerá como Example property updateden lugar de Example property.

En este paso, revisó algunos ejemplos de ganchos de creación y está listo para pasar a la siguiente parte del ciclo de vida: los ganchos de montaje.

Comprensión de los ganchos de montaje (inserción DOM)

Los ganchos de montaje suelen ser los más utilizados. Permiten acceder al componente inmediatamente antes y después del primer renderizado. Sin embargo, no se ejecutan durante el renderizado del lado del servidor.

Utilice ganchos de montaje si necesita acceder o modificar el DOM de su componente inmediatamente antes o después de la representación inicial.

No utilice ganchos de montaje si necesita obtener algunos datos para su componente durante la inicialización.

Nota: utilice created(o createdy activatedpara keep-alivelos componentes) en este caso, especialmente si necesita esos datos durante la representación del lado del servidor.

beforeMount

El beforeMountgancho se ejecuta justo antes de que se produzca la representación inicial y después de que se hayan compilado las funciones de plantilla o representación:

EjemploComponente.vue

scriptexport default {  beforeMount() {    console.log(`At this point, vm.$el has not been created yet.`)  }}/script

En este ejemplo, cuando beforeMountse ejecuta el gancho, este fragmento registrará el mensaje:

OutputAt this point, vm.$el has not been created yet.

mounted

En el mountedgancho, tendrás acceso completo al componente reactivo, a las plantillas y al DOM renderizado (a través de this.$el).

Úselo mountedpara modificar el DOM, especialmente al integrar bibliotecas que no son Vue:

EjemploComponente.vue

template  div ref="example-element"Example component./div/templatescriptexport default {  mounted() {    console.log(`At this point, vm.$el has been created and el has been replaced.`);    console.log(this.$el.textContent) // Example component.  }}/script

En este ejemplo, cuando mountedse ejecuta el gancho, este fragmento registrará el mensaje:

OutputAt this point, vm.$el has been created and el has been replaced.

Además, se registrará un mensaje de Example content.( ).this.$el.textContent

En esta sección, exploró casos de uso para ganchos de montaje. En el siguiente paso, revisará algunos ejemplos que utilizan ganchos de actualización.

Comprensión de los ganchos de actualización (Diff y Re-render)

Los ganchos de actualización se invocan siempre que una propiedad reactiva utilizada por el componente cambia o algo más hace que se vuelva a renderizar. Le permiten conectarse al ciclo de observación-computación-renderización de su componente.

Utilice ganchos de actualización si necesita saber cuándo se vuelve a renderizar su componente, tal vez para depurar o crear perfiles.

No utilice ganchos de actualización si necesita saber cuándo cambia una propiedad reactiva de su componente. En su lugar, utilice propiedades calculadas o observadores para ello.

beforeUpdate

El beforeUpdategancho se ejecuta después de que cambian los datos en el componente y comienza el ciclo de actualización, justo antes de que se parchee y vuelva a renderizar el DOM.

Úselo beforeUpdatesi necesita obtener el nuevo estado de cualquier dato reactivo en su componente antes de que se procese:

EjemploComponente.vue

template  div ref="example-element"{{counter}}/div/templatescriptexport default {  data() {    return {      counter: 0    }  },  created() {    setInterval(() = {      this.counter++    }, 1000)  },  beforeUpdate() {    console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)    // Logs the counter value every second, before the DOM updates.    console.log(this.counter)  }}/script

En primer lugar, este fragmento se almacenará countercomo 0. Cuando createdse ejecuta el gancho, se incrementará countercada 1000ms. Cuando beforeUpdatese ejecuta el gancho, este fragmento registrará el mensaje:

OutputAt this point, Virtual DOM has not re-rendered or patched yet.

counterY también se registra un número .

updated

El updatedgancho se ejecuta después de que los datos cambian en el componente y el DOM se vuelve a renderizar.

Úselo updatedsi necesita acceder al DOM después de un cambio de propiedad:

EjemploComponente.vue

template  div ref="example-element"{{counter}}/div/templatescriptexport default {  data() {    return {      counter: 0    }  },  created() {    setInterval(() = {      this.counter++    }, 1000)  },  updated() {    console.log(`At this point, Virtual DOM has re-rendered and patched.`)    // Fired every second, should always be true    console.log(+this.$refs['example-element'].textContent === this.counter)  }}/script

En primer lugar, este fragmento se almacenará countercomo 0. Cuando createdse ejecuta el gancho, se incrementará countercada 1000ms. Cuando updatedse ejecuta el gancho, este fragmento registrará el mensaje:

OutputAt this point, Virtual DOM has re-rendered and patched.

Y se registra un valor booleano trueporque el valor representado y el valor actual son iguales.

Ahora que ha explorado el uso de los ganchos de actualización, está listo para aprender sobre los ganchos de destrucción.

Comprensión de los ganchos de destrucción (Teardown)

Los ganchos de destrucción te permiten realizar acciones cuando se destruye tu componente, como limpieza o envío de análisis. Se activan cuando tu componente se desmantela y se elimina del DOM.

beforeDestroy

beforeDestroySe activa justo antes del desmontaje. El componente seguirá estando completamente presente y funcionando.

Úselo beforeDestroysi necesita limpiar eventos o suscripciones reactivas:

EjemploComponente.vue

scriptexport default {  data() {    return {      exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'    }  },  beforeDestroy() {    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)    // Perform the teardown procedure for exampleLeakyProperty.    // (In this case, effectively nothing)    this.exampleLeakyProperty = null    delete this.exampleLeakyProperty  }}/script

Este fragmento almacenará primero exampleLeakyProperty. Cuando beforeDestroyse ejecute el gancho, este fragmento registrará el mensaje:

OutputAt this point, watchers, child components, and event listeners have not been torn down yet.

Y luego exampleLeakyPropertyse borra.

destroyed

Cuando llegas al destroyedgancho, prácticamente no queda nada en tu componente. Todo lo que estaba adherido a él ha sido destruido.

Úselo destroyedsi necesita realizar una limpieza de último momento o informar a un servidor remoto que el componente fue destruido:

EjemploComponente.vue

scriptimport ExampleAnalyticsService from './example-analytics-service'export default {  destroyed() {    console.log(`At this point, watchers, child components, and event listeners have been torn down.`)    console.log(this)    ExampleAnalyticsService.informService('Component destroyed.')  }}/script

En primer lugar, este fragmento importará ExampleAnalyticsService. Cuando beforeDestroyse ejecute el gancho, este fragmento registrará el mensaje:

OutputAt this point, watchers, child components, and event listeners have been torn down.

Lo que quede del componente se registrará en la consola y ExampleAnalyticsServicese le pasará el mensaje Component destroyed..

Con esto, has completado tu revisión general de los ganchos del ciclo de vida de Vue.js.

Otros ganchos

Hay otros dos ganchos, activatedy deactivated. Estos son para keep-alivecomponentes, un tema que queda fuera del alcance de este artículo.

Basta con decir que te permiten detectar cuándo un componente que está envuelto en una keep-alive/keep-aliveetiqueta está activado o desactivado. Puedes usarlos para obtener datos para tu componente o manejar cambios de estado, comportándose efectivamente como createdy beforeDestroysin la necesidad de hacer una reconstrucción completa del componente.

Conclusión

En este artículo, se le presentaron los diferentes ganchos de ciclo de vida disponibles en el ciclo de vida de instancias de Vue.js. Se exploraron los diferentes casos de uso de los ganchos de creación, montaje, actualización y destrucción.

Si desea obtener más información sobre Vue.js, consulte nuestra página de temas de Vue.js para obtener ejercicios y proyectos de programación.