【vue3】keep-alive缓存组件

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

<template>

    <div class="yyx-box">
        <el-button type="primary" @click="change">切换组件el-button>
        
        
        
        
        <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40