用法
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在<keep-alive>内被切换时，它的mounted和unmounted生命周期钩子不会被调用，取而代之的是activated和deactivated.
使用
在路由组件配置文件当中配置组件是否需要被缓存，配置meta属性
{path:'/dynamic',name:'Dynamic',component:()=>import('@/views/Dynamic.vue'),meta:{keepAlive:true,showFooter:true,}},在根组件App.vue中使用keep-alive标签包含需要缓存的组件
<!--这是vue3的写法，与vue2的写法有所区别，如果这里使用vue2.x写法，会有警告--><router-viewv-slot="{Component}"><keep-alive><component:is="Component":key="$route.name"v-if="$route.meta.keepAlive"/></keep-alive><component:is="Component":key="$route.name"v-if="!$route.meta.keepAlive"/></router-view>缓存页面使用
onActivated(()=>{//被包裹组件被激活的状态下触发//逻辑代码}onDeactivated(()=>{//在被包裹组件停止使用时触发//逻辑代码})注意
页面第一次进入的时候，钩子触发的顺序是created->mounted->activated，所以别在mounted和activated方法中写相同的逻辑代码
多页面缓存需要配置key属性，来表示组件的唯一性和对应关系，如：:key="$route.path"
不要动态修改meta.keepAlive的值控制是否缓存，因为第一次是创建组件，没有缓存，需要缓存后，下一次进入才不会触发逻辑代码，如果最开始进入的时候meta.keepAlive值为false的话，渲染的是没有使用keep-alive的组件，则会触发相应代码