vue3中keep-alive全局缓存和条件缓存

keep-alive它是我们vue中的一个内置方法。

当我们需要缓存某个页面浏览位置或者el-tabs页面来回切换时，keep-alive的作用就体现出来了。

keep-alive有三个属性

1.include ：记录的是哪些组件可以被缓存

2.exclude:   记录了哪些组件不能被缓存

3.max: 记录的是可以缓存组件的最大数量

除此之外，keep-alive还提供了两个的生命周期钩子函数

actived: 在激活的时候的使用，第一次激活实在mounted之后执行

dectived:在失活的时候使用。

在vue2中全局使用

   <keep-alive>
      <router-view />
    </keep-alive>

在vue3中全局使用

 <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>

我们也可以通过给router设置一个标识来判断是否为缓存页面。

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

条件缓存(根据条件让其缓存)

在vue2时

    <keep-alive v-if='this.$router.meta.keepAlive'>
      <router-view />
    </keep-alive>

 <router-view v-else />

在vue3时

          <router-view v-slot="{ Component }" >
                <keep-alive :include="router.meta.keepAlive">
                  <Component :is="Component" />
                </keep-alive>

              </router-view>