【vue3】keep-alive缓存组件

String佳佳2023-10-22 13:37

include定义要缓存的组件名。注意，不是引入的别称，就是组件的文件名
exclude定义不缓存的组件名。一样的，这里是组件的文件名
max最多缓存多少个组件。如果组件个数大于max，会自动剔除掉不常用的
使用keep-alive后会增加两个生命周期：onDeactivated、onActivated(在子组件内使用)

html 复制代码

<template>

    <div class="yyx-box">
        <el-button type="primary" @click="change">切换组件</el-button>
        <!-- include定义要缓存的组件名。注意，不是引入的别称，就是组件的文件名 -->
        <!-- exclude定义不缓存的组件名。一样的，这里是组件的文件名 -->
        <!-- max最多缓存多少个组件。如果组件个数大于max，会自动剔除掉不常用的 -->
        <!-- 使用keep-alive后会增加两个生命周期：onDeactivated、onActivated(在子组件内使用) -->
        <keep-alive :include="['test1','test2']" :exclude="['test2']" :max="1">
            <Test1 v-if="flag"></Test1>
            <Test2 v-else></Test2>
        </keep-alive>

    </div>



</template>

<script setup lang='ts'>
    import { ref } from 'vue'
    import Test1 from '../components/test1.vue';
    import Test2 from '../components/test2.vue';

    let flag = ref<boolean>(true)
    const change  = ()=>{
        flag.value = !flag.value
    }


</script>
<style scoped lang='scss'>
    @include b(box){
        height: 100%;
        overflow: auto;
    }

</style>