keepAlive

<template>

  include是指缓存的组件,如果不写,则所有组件都会被缓存

  exclude是指不缓存的组件,如果不写,则所有组件都会被缓存

<keep-alive include="A">

  <A v-if="showA" />

  <B v-else />

</keep-alive>

<button @click="showA = !showA">toggle</button>

</template>

<script setup lang='ts'>

import { ref } from 'vue'

import A from './A.vue'

import B from './B.vue'

let showA = ref(true)

</script>

<style scoped lang='scss'>

</style>

 

<template>

<input type="text" name="" :value="value">

</template>

<script setup lang='ts'>

import { ref, onActivated, onDeactivated } from 'vue'

let value = ref('')

// 在被缓存的组件中,当组件被激活时,会触发onActivated

// 当组件被停用时,会触发onDeactivated

onActivated (() => {

  console.log('onActivated')

})

onDeactivated (() => {

  console.log('onDeactivated')

})

</script>

<style scoped lang='scss'>

</style>