<KeepAlive> Componente de Caché

Nota: Solo compatible con plataforma H5

<KeepAlive include = "" exclude = "" max = ""></KeepAlive>

@Descripción: Almacena en caché el componente envuelto

Consideremos primero un ejemplo de componente dinámico:

<component :is="moduloActivo"></component>

En este código, al cambiar dinámicamente entre componentes, el componente anterior se elimina y el nuevo se crea desde cero.

Esto plantea un problema: si el componente anterior es un formulario con opciones seleccionadas y datos ingresados, al volver al componente anterior, perderemos toda la información previamente introducida.

El componente <KeepAlive> resuelve este problema manteniendo en caché el componente anterior al cambiar entre componentes:

<KeepAlive>
    <component :is="moduloActivo"></component>
</KeepAlive>

1. Cuando un componente dentro de <KeepAlive> es reemplazado, sus ganchos de ciclo de vida activated y deactivated son invocados

2. Propiedades del componente <KeepAlive>:

<KeepAlive <strong>include</strong> = ""<strong> exclude</strong> = ""<strong> max</strong> = ""></KeepAlive>

Propiedad include:

@Descripción: [Opcional] Por defecto, almacena en caché todas las instancias de componentes internos. Include permite especificar qué componentes deben ser almacenados en caché

Opción 1: Cadena de texto con comas como separador

<!-- Especifica que los componentes a y b serán almacenados en caché -->
<KeepAlive include="a,b">
  <component :is="vistaActual"></component>
</KeepAlive>

Opción 2: Expresión regular

<!-- Indica que los componentes a y b serán almacenados en caché -->
<KeepAlive :include="/a|b/">
  <component :is="vistaActual"></component>
</KeepAlive>

Opción 3: Array

<!-- Especifica que los componentes a y b serán almacenados en caché -->
<KeepAlive :include="['a', 'b']">
  <component :is="vistaActual"></component>
</KeepAlive>

Propiedad exclude:

@Descripción: [Opcional] Los componentes especificados no serán almacenados en caché. Su uso es idéntico al de include

Propiedad max:

@Descripción: [Opcional] Número máximo de instancias para almacenar en caché

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

Ejemplo práctico:

Componente FormularioPersonal.vue

<template>
    <view>
        <h3>Datos personales<small> (los datos del formulario se mantendrán)</small></h3>
        <uni-easyinput
            placeholder="Su nombre"
            inputBorder
        >
        </uni-easyinput>
        <uni-data-checkbox :localdata="opcionesGenero"> </uni-data-checkbox>
    </view>
</template>

<script setup>
    const opcionesGenero = [{
        "value": 0,
        "text": "Femenino"
    }, {
        "value": 1,
        "text": "Masculino"
    }]
</script>

Componente FormularioLaboral.vue

<template>
    <view>
        <h3>Datos laborales<small>(los datos del formulario no se almacenarán)</small></h3>
        <uni-easyinput
            placeholder="Empresa actual"
            inputBorder
        >
        </uni-easyinput>
        <uni-data-checkbox :localdata="opcionesExperiencia"> </uni-data-checkbox>
    </view>
</template>

<script setup>
    const opcionesExperiencia = [{
        "value": 0,
        "text": "Menos de 1 año"
    }, {
        "value": 1,
        "text": "1-5 años"
    }, {
        "value": 2,
        "text": "Más de 5 años"
    }]
</script>

Página de demostración:

<template>
    <uni-data-checkbox v-model="tipoFormulario" :localdata="opcionesFormulario"> </uni-data-checkbox>
    <KeepAlive <strong>include="FormularioPersonal"</strong>><br></br>        <strong><!-- Es necesario llamar a una función, el nombre directo del componente no funcionará --></strong>
        <component :is="<strong>obtenerComponente()</strong>"></component>
    </KeepAlive>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    // En uni-app, los componentes dinámicos deben ser importados explícitamente
    import FormularioPersonal from '@/components/Formularios/FormularioPersonal.vue'
    import FormularioLaboral from '@/components/Formularios/FormularioLaboral.vue'

    const opcionesFormulario = [{
        "value": 0,
        "text": "Datos personales"
    }, {
        "value": 1,
        "text": "Experiencia laboral"
    }]
    const tipoFormulario = ref(0)

    const obtenerComponente = () => {
        return !tipoFormulario.value ? FormularioPersonal : FormularioLaboral
    }
</script>