缓存组件

• 需要缓存什么组件，就在keep-alive标签之间写对应组件，不要再套一层div标签
• keep-alive之间只能有一个“实际可显示”的组件
• 有include/exclude/max属性。include指定缓存组件，参数是文件名。exclude指定不缓存组件，参数是文件名。max指定缓存组件个数，采用lru算法，会自动舍弃最旧的组件缓存
• 增加了2个额外的生命周期。onActivated & onDeactivated

父组件

<template>
  <div>
    <t-button @click="onClick">点我切换</t-button>
    <!-- 组件b-vue的文件名就是B.vue，所以这里直接用B，支持指定多个-->
    <keep-alive :include="['B']">
      <!-- 需要缓存b-vue组件，就直接用，不要在b-vue外面套div或其他标签-->
      <b-vue v-if="choice" />
      <c-vue v-else />
    </keep-alive>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ApplyAWSIndex',
};
</script>
<script setup lang="ts">
import { ref } from 'vue';
import BVue from './B.vue';
import CVue from './C.vue';

const choice = ref(true);

const onClick = () => {
  choice.value = !choice.value;
};
</script>

<style scoped></style>

子组件B

<template>
  <div style="border: 1px solid black; height: 500px; background-color: #1dc8e5">
    我是B
    <label for="name1">name1:</label><t-input v-model="name" />
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue';

const name = ref('');

onMounted(() => {
  console.log('===> 创建（只做一次）');
});
onActivated(() => {
  console.log('===> keep-alive创建（当你切换时，会反复执行）');
});
onDeactivated(() => {
  console.log('===> keep-alive卸载（当你切换时，会反复执行）');
});
onUnmounted(() => {
  console.log('===> 卸载');
});
</script>

<style scoped></style>

子组件C

<template>
  <div style="border: 1px solid black; height: 500px; background-color: #3d87ff">
    我是C
    <label for="name1">name1:</label><t-input v-model="name" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
</script>

<style scoped></style>