vue3 对keep-alive使用及用法

1 app.vue

<template>

  <div style="display:flex;">

    <keepAlive></keepAlive>

  </div>

</template>

<script setup lang='ts'>

  import{ref,reactive, defineAsyncComponent} from 'vue'

  import keepAlive from './components/keepAlive.vue';

</script>

2 keepAlive.vue

<template>

  <div>

    <button  @click="flag = !flag">切换组件</button>

    <!--

      :include 只缓存A组件, 默认是全部缓存。

      :exclude 不缓存那个组件.(避免同时使用)

       max 指定缓存数量

     -->

    <keep-alive :include="['A','B']"  :max="100">

      <A v-if="flag"></A>

      <B v-else></B>

    </keep-alive>

  </div>

</template>

<script setup lang='ts'>

import A from './a.vue'

import B from './b.vue'

import{ref,reactive, onMounted, onUnmounted, onActivated, onDeactivated} from 'vue'

const flag = ref<boolean>(true);

const onSubmit = ()=>{}

onMounted(()=>{

  console.log('初始化===001')

})

/**

 * 只有开启了keep-alive:

 * onActivated和 onDeactivated 才生效。

 * 没有keep-alive 是没有onActivated和 onDeactivated生命周期的。

 */

onActivated(()=>{

  console.log('kepp-alive初始化===002')

})

onDeactivated(()=>{

  console.log('kepp-alive卸载===003')

})

onUnmounted(()=>{

  console.log('卸载===004')

})

</script>