Vue3+TypeScript学习笔记（十四）

有时我们不希望组件被重新渲染影响使用体验，亦或者出于某些性能优化需求需要存储非活跃组件状态，可以使用keep-alive内置组件

1. keep-alive有三个props，分别是include、exclude和max，用于限制标签内缓存组件的数量。其中include和exclude可以接受（无需v-bind）、Array或RegExp（两个都需要v-bind），如果使用了include则只有include中的组件会被缓存，如果使用了exclude则exclude中的组件会被排除在缓存之外。
2. max接收一个number类型参数，用于限制缓存组件的最大数量。若超出限定范围，使用频率最少的组件会被取消缓存
3. 此外，使用keep-alive组件后还会生成两个新的生命周期钩子onActivated和onDeactivated，分别在组件由缓存->活跃时触发和组件从活跃->缓存时触发。

切记，onActivated和onDeactivated这两个函数必须写在子组件中，否则将无法触发！
完整代码：

App.vue

<template>
  <!-- KeepAlive内部仅允许一个活跃的组件,其他非活跃的组件将被缓存 -->
  <KeepAlive>
    <A v-if="flag"></A>
    <B v-else></B>
  </KeepAlive>
  <button @click="flag = !flag">切换组件</button>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import A from './components/A.vue'
  import B from './components/B.vue'

  let flag = ref(true)
</script>

<style scoped></style>

A.vue

<template>
    <form>
        <input type="checkbox" /> <span>A</span>
        <br />
        <input type="checkbox" /> <span>B</span>
    </form>
</template>

<script setup lang="ts">
import { ref, reactive, onActivated, onDeactivated } from 'vue'
// 必须写在子组件中
onActivated(() => {
    console.log('组件A的keep-active被触发了')
})

onDeactivated(() => {
    console.log('组件A的keep-active被缓存了')
})
</script>

<style scoped></style>

B.vue

<template>
    <form>
        <input type="checkbox" /> <span>C</span>
        <br />
        <input type="checkbox" /> <span>D</span>
    </form>
</template>

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

onActivated(() => {
    console.log('组件B的keep-active被触发了')
})

onDeactivated(() => {
    console.log('组件B的keep-active被缓存了')
})
</script>

<style scoped></style>