Vue: cierta comprensión del ciclo de vida y las funciones de enlace

La llamada función de enlace del ciclo de vida (denominada función de ciclo de vida) se refiere a una función que desencadena la ejecución en las tres fases de creación, actualización y destrucción del componente. De acuerdo con la función de enlace activada en cada etapa, podemos realizar las operaciones correspondientes, como obtener datos de la interfaz de back-end, escuchar eventos, ejecutar eventos, ejecutar temporizadores, eliminar eventos, limpiar temporizadores, etc.

Según la situación anterior, el ciclo de vida se divide en tres etapas:

"Período de creación de instancias"/creación de componentes

"Vida útil"/actualización de componentes

"Período de destrucción"/destrucción de componentes

beforeCreate:

Después de la inicialización de la instancia

Después de la inicialización de la instancia, configure observadores de datos y eventos / Llamado antes del evento del observador.

Crear:

Se llama inmediatamente después de crear la instancia. En este paso, la instancia se configuró con lo siguiente: observadores de datos, operaciones de propiedades y métodos, y devoluciones de llamadas de eventos/observadores de eventos. Sin embargo, la fase de montaje aún no ha comenzado y las propiedades aún no son visibles

beforeMount:

Llamado antes de que comience el montaje: la primera llamada a la función de renderizado relevante. Las propiedades ya son visibles, pero siguen siendo el DOM original, no el recién creado.

mouted:

Este gancho se llama después de montar la instancia. Nota: El montaje no montará todos los subcomponentes juntos.

beforeUpdate:

Cuando se actualizan los datos, se llama antes de que cambie el DOM virtual. Esto facilita el acceso al DOM existente antes de la actualización, como eliminar manualmente un detector de eventos agregado.

actualizado:

Se llama después de actualizaciones de datos y cambios de DOM virtual.

Cuando se llama a este gancho, el componente DOM se actualiza, por lo que ahora puede realizar operaciones que dependen del DOM. Sin embargo, en la mayoría de los casos, debes evitar cambiar de estado durante este período. Si desea cambiar el estado en consecuencia, normalmente es mejor utilizar una propiedad calculada o un observador.

beforeDestroy:

Se llama antes de destruir la instancia. Durante este paso, la instancia todavía está completamente disponible. Los detectores de eventos, temporizadores, etc. generalmente se eliminan aquí para evitar pérdidas de memoria.

destruido:

Se llama después de que se destruye la instancia de Vue. Cuando se llama, todo lo señalado por la instancia de Vue se desvinculará, se eliminarán todos los detectores de eventos y se destruirán todas las instancias secundarias.