vue的keep-alive使用

<template>
  <div>
    <div>keepalive组件缓存</div>
    <button @click="flag = !flag">切换组件</button>

    <!-- keepalive组件缓存 并不会被销毁 -->
    <!-- 包裹的组件 会产生两个生命周期激活 激活actived 失活deactived  -->
    <!-- 组件不会销毁 keepalive只能报过一个组件 -->
          <!-- <keep-alive>
           <child v-if="flag"></child>

         </keep-alive> -->
    <!-- 可以传入字符串 也可以传入正则  :include="['child']" 包含-->
    <keep-alive>
      <component :is="flag ? child : child1"></component>
    </keep-alive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import child from '../views/child.vue';
import child1 from '../views/child1.vue';
const flag = ref(true);
</script>