La explicación detallada del ciclo de vida de vue3 y la función del ciclo de vida (función de enlace) es fácil de entender.
El proceso desde la creación hasta la destrucción de una instancia de Vue es el ciclo de vida. Es una serie de procesos como crear una instancia de vue, inicializar datos, compilar plantillas, montar Dom, renderizar → actualizar → renderizar, desinstalar, etc. Se proporciona una serie de funciones de ciclo de vida en el ciclo de vida de vue, como se muestra en la figura a continuación:
Una función que se ejecutará automáticamente en un momento determinado
Una función que se ejecutará automáticamente después de la inicialización antes de que se genere la instancia de vue (la instancia de vue no ha sido completamente creado en este momento)
Función que se ejecutará automáticamente después de que se cree la instancia de vue (se crea la instancia de vue)
Los ejemplos son los siguientes:
Resultados de impresión:
Representa el contenido del componente Una función que se ejecuta automáticamente antes de llegar a la página (la función de representación correspondiente se llama por primera vez)
Una función que se ejecuta automáticamente después renderizar el contenido del componente en la página
Los ejemplos son los siguientes:
Resultado de impresión: beforeMount en la figura siguiente se imprime pero el contenido del componente no está montado en el nodo contentMain
Una función que se ejecutará automáticamente cuando los datos en los datos cambien
Cuando los datos en los datos Una función que se ejecutará automáticamente después de que los datos cambien y los datos de la página se vuelvan a representar (en en la mayoría de los casos, evite cambiar el estado durante este período, lo que puede causar un bucle infinito de actualizaciones)
Los ejemplos son los siguientes:
Imprimir resultados:
El 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 después de que la instancia de vue falla y el dom se destruye por completo (en este momento todos Las cosas se desvincularán, se eliminarán todos los detectores de eventos y las instancias secundarias se destruirán)
Los ejemplos son los siguientes:
Imprima de la siguiente manera: