Funciones de ciclo de vida y almacenamiento en caché de componentes de enrutamiento dinámico en vue

lt;keep-alivegt; es un componente integrado de Vue que mantiene el estado en la memoria cuando los componentes cambian, evitando así la representación repetida del DOM. lt;keep-alivegt;Almacenar en caché las instancias de componentes inactivos en lugar de destruirlas al encapsular componentes dinámicos. Al igual que "transición", "mantener vivo" es un componente abstracto: no representa elementos DOM de forma independiente ni aparece en la cadena de componentes principal. prop:

Hay dos funciones de ciclo de vida:

activado: activado

desactivado: desactivado

Usar keep-alive Guardar la barra de desplazamiento :

Idea: antes de salir de la página de enrutamiento, guardar la posición actual de la barra de desplazamiento desde la parte superior en beforeRouterEnter y cuando se active nuevamente usar la función de gancho activada para que sea igual al valor guardado cuando salimos de la página.

beforeCreate: la instancia del componente se acaba de crear antes de que se calculen las propiedades del componente (como los atributos de datos).

create: la instancia del componente se ha creado y las propiedades se han vinculado. , pero el DOM aún no se ha generado y $ El atributo el aún no existe

beforeMount: la plantilla ha sido compilada/instalada

beforeMount: la plantilla ha sido compilada/ instalado

beforeMount: la plantilla ha sido compilada/instalada. montado: Después de compilar/montar la plantilla

beforeUpdate: Antes de actualizar el componente

actualizado: Después de actualizar el componente

activado: Llamado al activar el componente

p>

desactivado: llamado cuando se elimina el componente

beforeDestory: llamado antes de que se destruya el componente

destoryed: llamado después de que se destruye el componente

(1) Fase de creación

La marca de creación es New vue(), beforeCreate y creado ocurren después de la operación de creación, pero la diferencia es que beforeCreate se activa cuando los datos no se han inicializado.

(1) beforeCreate se activa antes de la inicialización y vinculación de los datos, mientras que create se activa después de generar los datos.

(2) Fase de montaje

La principal diferencia entre beforeMount y montado es si la plantilla está compilada y montada.

(3) Fase de actualización

antes de la actualización y la actualización es cuando los datos cambian.

(4) Fase de destrucción

La diferencia entre beforeDestory y destruido es que los datos de valor de el todavía existen. Esto se debe a que $destroy solo destruye una instancia, limpia sus conexiones con otras instancias y desvincula todas sus directivas y detectores de eventos, sin borrar los datos ni el dom.