Función de enganche del ciclo de vida Vue

Ciclo de vida

Una serie de procesos desde la creación hasta la destrucción de una instancia o componente vue (un componente es esencialmente una instancia con opciones predefinidas) se denomina ciclo de vida.

Función de gancho de ciclo de vida

Las funciones que se ejecutan automáticamente en diferentes etapas del ciclo de vida se denominan funciones de enlace en el ciclo de vida.

Las tres etapas principales del ciclo de vida y sus funciones de enganche.

1. Fase de montaje inicial
   1. beforeCreate
   2. creado
   3. beforeMount
   4. montado
2. Etapa de actualización
   1. beforeUpdate
   2. actualizado
3. Fase de destrucción
   1. antes de destruir
   2. destruido

beforeCreate

Antes de que se cree la instancia

1. Solo se activará una vez durante un ciclo de vida.
2. No se puede obtener el elemento del punto de montaje y los datos
3. En general, no tiene ningún efecto, pero también puede enviar ajax si tiene que ir a la barra, porque ajax es una operación asincrónica. Cuando se completa asincrónicamente, el ciclo de vida entra en la etapa posterior (montado se completa), para que pueda modificarlo en la etapa siguiente Los datos en los datos.

creado

Se crea la instancia.

1. Solo se activará una vez durante un ciclo de vida.
2. Puede obtener los datos en la opción de datos, y puede llamar a la función en la opción de métodos.
3. No se puede obtener el elemento de punto de montaje
4. En general, envíe una solicitud ajax aquí para obtener los datos necesarios cuando se abre la página

beforeMount

Antes de montar la instancia: se llama por primera vez a la función de representación correspondiente.

Montaje significa: vue completa el análisis de los datos de la plantilla y los reemplaza con el DOM real.

1. Solo se activará una vez durante un ciclo de vida.
2. El DOM real no se puede obtener a través de vm. $ El
3. En general, no tiene ningún efecto, no necesita operarlo.

montado

La instancia está montada

1. Solo se activará una vez durante un ciclo de vida.
2. Puede obtener el verdadero DOM
3. Inicializar las operaciones relacionadas con DOM se pueden colocar aquí. Por ejemplo, la instanciación de Swiper.

beforeUpdate

Antes de la actualización de instancia

1. Durante un ciclo de vida, puede activarse varias veces
2. Puede obtener el DOM antes de la actualización de datos, pero no puede obtener el DOM después de la actualización de datos
3. Generalmente no modifique los datos aquí, y no envíe solicitudes asincrónicas, entrará en un bucle infinito
4. En general, no tiene ningún efecto, no necesita operarlo.

actualizado

Actualización de instancia completada

1. Durante un ciclo de vida, puede activarse varias veces.
2. Puede obtener el DOM después de la actualización de datos.
3. Generalmente no modifique los datos aquí, y no envíe solicitudes asincrónicas, entrará en un bucle infinito
4. Generalmente se usa para operaciones después de una actualización DOM real, como la actualización Swiper.

antes de destruir

Antes de que la instancia sea destruida

1. Haga algo de destrucción, como borrar el temporizador, destruir el enlace del evento global, etc.

destruido

La instancia es destruida

1. En este momento, solo quedaba el dom shell. Se han desmontado los componentes, se ha eliminado el enlace de datos, se ha eliminado la supervisión y se han destruido las instancias secundarias.
2. En general, no tiene ningún efecto, no necesita operarlo.