携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情
keepAlive是vue中的一个内置组件，主要是用来缓存组件。
使用场景
一般情况下，我们在进行组件切换时，组件默认会被销毁，如果有需求要求保存之前的状态，例如，我们希望返回到一个组件的时候，这个组件中的表单数据还存在，而不是都被销毁，那么这种时候就可以使用KeepAlive来进行组件的缓存。这样，被KeepAlive缓存过的组件在进行切换时，不会被卸载，组件中的数据也不会被销毁。
KeepAlive使用方法及配置
只需要使用<keep-alive>标签将组件包裹起来，就可以实现keepalive缓存，如下：
<keep-alive>
<router-view></router-view>
</keep-alive>
但在一个项目中我们应该只将需要缓存的组件使用keepalive，而不是所有组件都进行keepalive缓存，这时候，我们可以使用include或exclude属性来设置哪些组件需要被设置或过滤，如下：
<keep-alive :include="['a', 'b']">
<router-view></router-view>
</keep-alive>
<keep-alive :exclude="['a', 'b']">
<router-view></router-view>
</keep-alive>
如上，可以使用include设置只有a和b组件被keepalive缓存，也可以使用exclude设置除了a和b以外的其余页面均被keepalive缓存。
除了上述使用include和exclude来设置需要被缓存的组件，我们也可以在路由中增加一个是否需要被keepalive缓存的属性来进行判断，如果需要被缓存就直接用keepalive加载,如下：
<keep-alive>
<router-view v-if="$route.meta.isKeepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.isKeepAlive"></router-view>
生命周期
被keepalive缓存的组件，如果再次进来或离开时，需要对其做一些操作，那么我们就需要走keepalive对应的生命周期，也就是activated和deactivated，在vue3中对应的事件是onActivated和onDeactivated。
- onActivated： 是被keepalive缓存的组件被激活时触发，并且在组件挂载的时候也会触发
- onDeactivated：是被keepalive缓存的组件失活时触发，并且在组件卸载的时候也会触发
