vue3 keepAlive 缓存组件

props
keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

max:缓存组件最大数量

//vue3.0 组件的name 不需要自己定义，组件的name默认是组件的名字

<template>
    <div>
        <!-- 缓存组件  -->

        <KeepAlive exclude="componentA">
              <componentA v-if="test" >

              </componentA>

            <componentB  v-else>
                <input type="text" name="b" >
            </componentB>

        </keepAlive>
          
        <button @click="change">切换</button>
    </div>
</template>
<script>


</script>
<script setup>
import { onActivated, onDeactivated, ref } from 'vue';
import componentB from '@/components/componentB.vue';
import componentA from '@/components/componentA.vue';

onActivated(()=>{
    console.log('激活调用了');
})

onDeactivated(()=>{
    console.log('失活调用了');
})
const test = ref(true)
const change = ()=>{
    test.value = !test.value
}

</script>

<style lang="scss" scoped>

</style>