内置组件：keepalive

一，前言

1.keepalive是vue的一个内置组件

2.在vue中我们可以使用component内置组件根据is属性来切换组件，而keepalive组件的功能就是在多个组件间动态切换时缓存被移除的组件实例，

二，keepalive使用

1.默认情况下，一个组件实例在被替换掉后会被销毁，这会导致它丢失其中所有已变化的状态，可以使用keepalive组件使被移除的组件不被销毁，而是处于失活状态

<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

2.我们可以通过include和exclude属性来定制某个组件是否开启默认缓存

（1）字符串形式，内容为组件名，多个组件用,分割

<KeepAlive include='a,b'>
  <component :is="activeComponent" />
</KeepAlive>

（2）数组形式

<KeepAlive :include="['a','b']">
  <component :is="activeComponent" />
</KeepAlive>

（3）正则形式

<KeepAlive :include="/a|b/">
  <component :is="activeComponent" />
</KeepAlive>

3.注意，使用include和exclude缓存的组件一定要显式的声明name选项（vue2），在vue3中当我们使用 <script setup> 的单文件组件，文件名就是组件名的名称，不用显式的定义

4.我们可以通过max 属性来限制可被缓存的最大组件实例数，超过最大属性时，最久没被访问的实例将会被销毁

<KeepAlive :max="6">
  <component :is="activeComponent" />
</KeepAlive>

三，缓存组件的生命周期

1.一个被缓存的组件在被移除dom时会执行onDeactivated()钩子，在被重新插入dom时执行onActivated()

2.需要注意的是onActivated和onDeactivated在挂载和卸载时也会执行