[Vue3 Capítulo 22] Componente de caché KeepAlive

Prefacio

Durante el desarrollo del proyecto de administración de backend de Vue, a veces se utiliza un enfoque similar a una pestaña para colocar el menú de la izquierda en la parte superior para un acceso rápido.

El problema es que cada vez que se accede a un componente, se recreará una nueva instancia de componente vue. Al cambiar de componente, se reenviarán todas las solicitudes de red de otros componentes visitados. Es decir, se ejecutará nuevamente un ciclo de vida completo de Vue, como creación, montaje y destrucción, y se inicializarán todos los datos.
Aunque esto es bueno y siempre puede mantener los datos más recientes, en muchos escenarios comerciales no queremos que tenga ese efecto. Otro ejemplo:
ahora hay una página de formulario. Cuando completo el formulario, es posible que tenga que volver a la página anterior para ver cierta información para completar el formulario. Se sigue la convención de utilizar la ruta para regresar a la página anterior. Cuando termine de ver la página del nivel superior, cuando regrese a la interfaz del formulario, encontrará que toda la información del componente desapareció, lo cual es muy desagradable. A continuación, se necesitan algunos medios para retener el estado del componente, y esa es la función de mantener vivo.
La ventaja de utilizar keep-alive es que el estado se retiene en la memoria durante el cambio de componentes, lo que evita la representación repetida del DOM, reduce el tiempo de carga y el consumo de rendimiento y mejora la experiencia del usuario.

Plataforma de gestión digital
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
sistema de permisos-
Dirección del blog personal del centro comercial

1. Uso básico

1.1 Descripción general

A veces no queremos que los componentes se vuelvan a renderizar para afectar la experiencia del usuario; o por razones de rendimiento, queremos evitar múltiples renderizaciones que reduzcan el rendimiento. En cambio, esperamos que el componente pueda almacenarse en caché y mantener su estado actual. Aquí es cuando necesitas usar <KeepAlive>componentes.

Habilitar <KeepAlive>cambios en el ciclo de vida

• Al ingresar por primera vez: onMounted > onActivated
• Desactivado se activa después de salir
• Ingrese nuevamente: solo se activará onActivated

1.2 Demostración del código

<script setup>
    import { ref,shallowRef } from 'vue'
    import CompA from './CompA.vue'
    import CompB from './CompB.vue'

    const current = shallowRef(CompA)
    
    let num = ref(10);
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
  
    <KeepAlive>
    	<!-- 动态组件绑定 is 属性切换 -->
    	<component :is="current"></component>
    </KeepAlive>  
    
    <keep-alive>
    	<!-- 多个条件判断的子组件 -->
        <comp-a v-if="num > 1"></comp-a>
        <comp-b v-else></comp-b>
    </keep-alive>
    
    <!-- 和 Transition 动画组件一起使用 -->
    <transition>
        <keep-alive>
        	<component :is="current"></component>
        </keep-alive>
    </transition>
  </div>
</template>

Los métodos de montaje de eventos, etc., solo se ejecutan una vez y se colocan en onMounted; los métodos que se ejecutan cada vez que se ingresa el componente se colocan en onActivated.

2. incluir/excluir

2.1 Descripción general

<KeepAlive>De forma predeterminada, todas las instancias de componentes internos se almacenan en caché, pero podemos personalizar este comportamiento mediante includey accesorios.exclude

• incluir: incluir, los componentes contenidos en esta colección o cuyos valores de nombre coincidan con expresiones regulares se almacenarán en caché
• excluir: compruebe que los componentes cuyo valor de nombre esté incluido en esta colección o coincidan mediante expresiones regulares no se almacenarán en caché.

El valor de ambos accesorios puede ser una cadena separada por comas, una expresión regular o una matriz que contenga ambos tipos.

2.2 Ejemplos de código

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

incluir y excluir devolverán un valor booleano basado en el valor coincidente. Por supuesto, este valor booleano no está controlado por usted, sino que es operado internamente por el componente keep-alive. Determinará cómo se refleja el valor booleano según el componente. nombre que ingresa. Es la diferencia entre simplemente requerir almacenamiento en caché y no requerir almacenamiento en caché.

3. número máximo máximo de instancias de caché

Puede maxlimitar la cantidad máxima de instancias de componentes que se pueden almacenar en caché pasando un accesorio. <KeepAlive>se comporta como un caché LRU cuando se especifica max: si el número de instancias almacenadas en caché está a punto de exceder el número máximo especificado, las instancias almacenadas en caché a las que no se ha accedido durante más tiempo se destruirán para dejar espacio para nuevas instancias.

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

Vale la pena señalar aquí que cuando se establece el límite superior del componente de caché máximo, se formará una estructura de datos de montón. Cuando la cantidad de componentes que configuró para almacenarse en caché excede el límite máximo, los elementos en la parte inferior del montón se eliminarán. En resumen, funciona de acuerdo con la regla de primero en entrar, primero en salir. Cuando se alcanza el límite superior de componentes almacenados en caché, el primer componente almacenado en caché se eliminará y el nuevo componente almacenado en caché se enviará a la parte superior del montón.

4. Ciclo de vida de la instancia de caché

Cuando una instancia de componente se elimina del DOM pero <KeepAlive>sigue siendo parte del árbol de componentes porque está almacenada en caché, se vuelve inactiva en lugar de descargarse. Cuando una instancia de componente se inserta en el DOM como parte del árbol de caché, se reactivará .

Un componente persistente puede registrar enlaces de ciclo de vida para los dos estados correspondientes mediante onActivated()y .onDeactivated()

<script setup>
    import { onActivated, onDeactivated } from 'vue'

    onActivated(() => {
      // 调用时机为首次挂载
      // 以及每次从缓存中被重新插入时
    })

    onDeactivated(() => {
      // 在从 DOM 上移除、进入缓存
      // 以及组件卸载时调用
    })
</script>

onActivatedTambién se llama cuando el componente está montado y onDeactivatedtambién se llama cuando el componente está desmontado. Estos dos enlaces se aplican no sólo al <KeepAlive>componente raíz del caché, sino también a los componentes descendientes en el árbol del caché.

5. Resumen

Los componentes envueltos por keep-alive se retendrán en el árbol de componentes. Puede continuar operando los componentes de otros nodos hoja, pero los componentes de otros nodos hoja seguirán pasando por el ciclo completo de declaración de creación, generación y destrucción normalmente. Puedes volver a visitarlos. Cuando se crea un componente, todo es nuevo y el componente envuelto por keep-alive siempre crecerá en el árbol y siempre existirá. Además de pasar por la creación y generación, no se destruirá antes de la página. se descarga Simplemente puede entender que si se guarda en la memoria como un cierre, no morirá. En Vue, esto significa que el componente siempre se retiene en el DOM virtual, y el estado del componente y sus componentes descendientes se mantiene, pero no se representa. Aquí, toque la pizarra. Tenga en cuenta que el componente siempre se retiene en el DOM virtual En el DOM virtual, el estado del componente y los componentes descendientes se mantiene pero no se representa. Bueno, así es, los componentes descendientes de los componentes que introduzcas también se almacenarán en caché.