Utilice ciclos de vida de activación y desactivación para implementar keep-alive en Vue

Mientras se solucionaba un error heredado, se llamó al componente secundario en el componente principal mediante varios métodos. Todos los métodos prueban que los datos del componente secundario se han actualizado. Sin embargo, el componente secundario simplemente no se volvía a renderizar y pasamos dos días pensando en ello y solucionando varios problemas.

Finalmente, finalmente encontré una respuesta cercana. Resulta que en vue, este componente se convirtió originalmente en un componente de tono **** y se encapsuló con para almacenar en caché la información seleccionada por el usuario. .

Esta forma de escribir es un poco más complicada

En resumen:

Si queremos que el componente almacenado en caché se renderice nuevamente, entonces inclúyelo en keep-alive. Los componentes creados en tendrán dos enlaces de ciclo de vida adicionales: activación y desactivación:

La activación se activará cuando el componente que contiene keepalive se renderice nuevamente

La desactivación se activará cuando el componente que contiene keepalive keepalive se renderiza nuevamente

Se activa cuando se destruye el componente

keepalive es un componente abstracto y los componentes almacenados en caché no se montarán. Desactivar ganchos

Para resumir: los componentes empaquetados no se pueden volver a renderizar incluso cuando se usan claves o ganchos en otros componentes, porque el método creado solo se ejecuta una vez.

Sin embargo, si se usa activado junto con la renderización de bind child:key, la página se volverá a renderizar, incluida la creación y el montaje.

Por analogía, combinar deactivated con llamar a un subcomponente para destruir el componente con v-if o un gancho también puede activar el método desactivado.