vue中的keep-alive缓存

大群

在开发vue项目时,我们经常需要在各个组件之间进行切换,当我们在A组件中写了一些内容,或者保存了一些状态的时候,切换到其他组件,A组件的内容就消失了,这是什么原因呢?

我们在A组件的生命周期created中打印一下:

created(){
    // eslint-disable-next-line no-console
    console.log("组件重新渲染了");
  },

然后我们在浏览器中来回切换几次组件,查看一下控制台:
捕获.PNG
可以看出,每一次进行组件切换的时候,组件都会进行重新渲染,所以里面的内容也会跟着消失,那么我们就会用到keep-alive来解决这个问题。

keep的几种使用方式

1.自定义想要缓存的组件

首先在App.vue中添加代码:

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

这一段代码的意思是:
当正在跳转的组件的$route.meta.keepAlive为true时,就将该组件加入缓存,否则不加入缓存。

然后在路由中找到我们需要进行缓存的组件,设置meta.keepAlive的值为true

    path: '/',
    name: 'Home',
    component: Home,
    meta: {
        keepAlive: true
    }

此时当我们在home组件表单中输入123,然后点击跳转到其他组件再回来的时候,我们发现123仍然存在,生命周期也不会再重新打印了。

我们还可以直接在路由守卫中进行keepAlive值的设置:

beforeRouteLeave(to,from,next){
    to.meta.keepAlive = true;
    next();
  }

2.结合动态组件<component>使用

<template>
  <div class="home">
  <keep-alive>
    <component v-if="iview" :is="view1"></component>
    <component v-if="!iview" :is="view2"></component>
  </keep-alive>
  <button @click="iview = !iview">切换子组件</button>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
import WorldHello from '@/components/WorldHello.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,WorldHello
  },
  data(){
    return{
      iview:true,
      view1:HelloWorld,
      view2:WorldHello
    }
  }
}
</script>

这样我们在HelloWorld和WorldHello这两个组件之间进行切换时候,两个组件都会被缓存了。

注意:动态组件中才可以使用,静态组件是不可以使用的,例如下面这种:

<keep-alive>
    <component is="view1"></component>
</keep-alive>
阅读 979
65 声望
3 粉丝
0 条评论
65 声望
3 粉丝
文章目录
宣传栏