vue3_keep-alive组件

keep-alive缓存组件

新建两个表单组件，Form1.vue和Form2.vue，利用v-if控制切换，测试缓存效果

• include 和 exclude 一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组
• include 和 exclude根据组件的 name 选项进行匹配；
• 可以通过传入 max prop 来限制可被缓存的最大组件实例数;如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间

<keep-alive :include="['Form1','Form2']" :exclude="['Form1']">
    <Form1 v-if="!flag"></Form1>
    <Form2 v-else></Form2>
</keep-alive>
//测试过程中发现了include失效的问题，在Form1.vue组件中加上下面内容解决
<script lang="ts">
   export default {
    name:"Form1"
  }

keep-alive的生命周期

 activated() {
    // 在首次挂载、
    // 以及每次从缓存中被重新插入的时候调用
  },
  deactivated() {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
  }

• activated 在组件挂载时也会调用，并且 deactivated 在组件卸载时也会调用。
• 这两个钩子不仅适用于 缓存的根组件，也适用于缓存树中的后代组件。