Explicación popular del ciclo de vida de vue3 y las funciones del ciclo de vida (funciones de enlace)

El proceso desde la creación hasta la destrucción de una instancia de Vue es el ciclo de vida. Es decir, una instancia de vue comienza desde la creación, inicialización de datos, compilación de plantillas, montaje de Dom, renderizado → actualización → renderizado, desinstalación y una serie de procesos. Se proporciona una serie de funciones de ciclo de vida en el ciclo de vida de vue, de la siguiente manera: <. /p>

Una función que se ejecutará automáticamente en un momento determinado

Una función que se ejecutará automáticamente antes de que se genere la instancia de vue y después de la inicialización (en este momento, la instancia de vue no se ha creado completamente)

Funciones que se ejecutarán automáticamente después de crear la instancia de vue

Los ejemplos son los siguientes:

Resultados de impresión:

Funciones que se ejecutan automáticamente antes de representar el contenido del componente en la página (la primera vez que se llama a la función de representación relevante)

Una función que se ejecuta automáticamente después de que el contenido del componente se presenta en la página

Una función que se ejecuta automáticamente después de que el contenido del componente se presenta en la página. Una función que se ejecuta automáticamente después de representar el contenido del componente en la página

Ejemplo:

Resultados de impresión: se imprime lo siguiente antes de Mount, pero el contenido del componente no se carga en el nodo contentMain

Una función que se ejecuta automáticamente cuando los datos en los datos cambian.

Una función que se ejecuta automáticamente cuando los datos en los datos cambian y los datos de la página se vuelven a representar. Función que se ejecuta automáticamente cuando se vuelven a representar los datos de la página (en la mayoría de los casos, se debe evitar cambiar el estado durante este período; de lo contrario, provocará un bucle infinito de actualizaciones)

Ejemplo:

Imprimir resultado:

La función que se ejecuta automáticamente antes de que se destruya la instancia de vue (la instancia todavía está disponible en este momento)

La función que se ejecuta automáticamente cuando se la instancia de vue falla y el dom se destruye por completo (en este momento todo el contenido todavía está disponible)

Una función que se ejecuta automáticamente cuando la instancia de vue falla y el dom se destruye por completo (todo el contenido se destruye por completo en esta vez). Función ejecutada (en este punto todo está desatado, todos los detectores de eventos se eliminan y las instancias secundarias se destruyen)

Ejemplo:

Impreso a continuación: