1. Las 8 funciones del ciclo de vida de Vue
antes de crear (antes de la creación) comienzan a procesar los datos de la instancia, las propiedades calculadas, los métodos, las propiedades de monitoreo, etc., en esta etapa
2.creado (después de la creación) en esta etapa calcula las propiedades de la instancia Se han configurado métodos, atributos de escucha del reloj, etc., pero el componente aún no se ha montado
3.beforeMount (antes del montaje) el componente comienza a montarse en la página.
4.Mouted (después del montaje), el montaje del componente se ha completado y se pueden realizar solicitudes ajax aquí. El navegador ya contiene la estructura dom del componente. Esta es también la primera etapa en la que se puede operar el dom.
5.beforeUpdate (antes de la actualización) se activa cuando los datos se actualizan en el componente. En este momento, los datos se han actualizado, pero el DOM relacionado con los datos en la página aún no se ha actualizado.
6.actualizado (actualizado) En este momento, la página se ha actualizado según los datos más recientes.
7.beforeDestroy (antes de la destrucción) El componente está listo para iniciar la destrucción, pero aún puede funcionar normalmente.
8.destruido (después de la destrucción) El componente ha sido destruido.
La secuencia de ejecución de la carga inicial de un componente.
Cuando un componente se carga por primera vez, cuatro funciones de enlace (funciones de ciclo de vida) actualizan el componente antes de crear (antes de la creación), creado (después de la creación), beforeMount (antes del montaje), Se activará montado (después del montaje)
. El orden de ejecución de las funciones del ciclo de vida.
Cuando se actualiza el componente, la función de enlace activada es beforeUpdate --> actualizado
La secuencia de ejecución de las funciones del ciclo de vida cuando se destruye un componente.
Cuando se destruye un componente, la función de enlace activada es beforeDestroy -> destruido
Las funciones del ciclo de vida de los componentes padre e hijo.
Las funciones del ciclo de vida y la secuencia de ejecución se activan cuando los componentes padre e hijo se cargan por primera vez.
Cree dos componentes y agregue el siguiente código.
Componente padre // Antes de que el componente padre sea creado,
beforeCreate() { console.log(“Se está creando el componente principal. creado"); }, //Después de crear el componente principal creado () { console.log("Se ha creado el componente principal"); }, //Antes de montar el componente principal beforeMount() { console.log("El componente principal se está montando"); }, //Después de montar el componente principal montado() { console.log("El componente principal se monta el componente principal se ha montado"); }, //Antes de que se actualice el componente principal beforeUpdate() { console.log("El componente principal está montado" ); El componente se está actualizando"); }, //Después de que el componente principal se actualiza actualizado() { console.log("El componente principal se ha actualizado"); }, //Antes de que se destruya el componente principal beforeDestroy() { console.log("El componente principal se está destruyendo"); } ,
//Después de destruir el componente principal destruido
() { console.log("El componente principal ha sido destruido"); }, Componente secundario // Antes de crear el componente secundario beforeCreate() { console.log("El componente secundario se está creando"); }, //Después de crear el subcomponente creado () { console.log("El subcomponente ha sido creado"); }, //Antes de montar el subcomponente beforeMount() { console.log(" El subcomponente se está montando") ; }, //Después de montar el subcomponente montado() { console.log("El subcomponente ha sido montado"); }, //Antes de que se actualice el subcomponente beforeUpdate() { console.log ("El subcomponente se está actualizando" ); }, // actualizado() { console.log("El subcomponente se ha actualizado"); }, // beforeDestroy() { antes de que se destruya el subcomponente
console.log("El subcomponente se está destruyendo");
},
//Después de destruir el subcomponente destruido
() { console.log("El subcomponente ha sido destruido"); }, después de ejecutar el código, se descubre que la consola genera los siguientes resultados : Se puede encontrar que el orden de ejecución es padre antes de Crear -> padre caído -> padre antes de Montar -> hijo antes de Crear -> hijo creado -> hijo antes de Montar -> hijo montado -> padre declaración montada que se activa cuando se actualiza el componente padre-hijo. Funciones periódicas y orden de ejecución. Agregue datos al componente padre y luego defina un botón. Después de hacer clic, a+1 data() { return { a: 1, }; }, se puede ver que el orden de ejecución de la función de enlace cuando se actualizan los datos de los componentes padre e hijo es: Padre antes de la actualización --> Niño antes de la actualización --> Niño actualizado --> Padre actualizado
La secuencia de ejecución de las funciones del ciclo de vida se activa cuando se destruyen los componentes padre e hijo.
Padre antes de Destroy --> Niño antes de Destroy --> Niño destruido --> Padre destruido
- Explicación detallada de los métodos del ciclo de vida
Detalles de la función de enlace Notas
del escenario beforeCreate Después de inicializar la instancia, se crea el componente. En este momento, el, los datos y el mensaje están todos subdefinidos. Puede agregar el evento de carga; en escenarios de aplicaciones del lado del servidor , se envían más solicitudes de datos en este momento
creado Después de crear la instancia, los datos y los métodos se inicializan para finalizar el evento de carga; se recomienda enviar los datos de la solicitud en este momento, especialmente cuando los datos devueltos están relacionados con el enlace evento beforeMount. Antes del montaje inicial,
se completa la inicialización de el, y el render también se puede enviar cuando se llama por primera vez. Las solicitudes de datos no se llamarán durante el renderizado del lado del servidor. El
montaje se completa para obtener los elementos DOM en el y realizar operaciones DOM; si la operación de datos devueltos depende de la finalización de DOM, se recomienda enviar solicitudes de datos en este momento. beofreUpdate no será llamado durante la renderización del lado del servidor. Llame antes de que comience el montaje. Acceda al DOM existente antes de que se complete el montaje
. completado, como eliminar manualmente el detector de eventos agregado; también puede modificar aún más los datos. No se llamará durante la representación del servidor. Solo la representación inicial llamará a la actualización en el lado del servidor. Debido a los datos modificados, el ejecutable
DOM- La operación dependiente se llama cuando se vuelve a renderizar la interfaz. No se llamará durante la renderización del lado del servidor. La operación
keep-alive activada no se llamará durante la renderización del lado del servidor cuando el componente esté
activado. La operación dependiente no se llamará durante la renderización del lado del servidor. renderizado del lado del servidor cuando el componente está desactivado. Llamado
beforeDestroy, se llama a eliminar dinero antes de que se destruya la instancia para enviar un mensaje de confirmación; el temporizador de limpieza no se llamará durante el renderizado del lado del servidor.
destruido Se llama después de que se destruye la instancia. Cuando se llame, todo se desvinculará, todos los detectores de eventos se moverán y la instancia secundaria se destruirá. Se ha eliminado la sugerencia. No se llamará durante la representación del lado del servidor. Se llama a errorCaptured cuando se captura un error de un componente descendiente.
. Recibe tres parámetros: el objeto de error, la instancia del componente donde ocurrió el error y una cadena que contiene información sobre el origen del error. Se puede devolver falso para evitar que el error se propague más hacia arriba. Modificar el estado del componente Nuevo en 2.5.0
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"