vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

Stephenie ·

更新时间:2024-11-14

· 1791 次阅读

一、使用场景

二、认识下keep-alive

三、在组件中应用

四、解决组件不缓存问题

五、keep-alive配合router使用

总结

一、使用场景

在vue开发过程中（单页面），有一些需求需要我们把页面状态保存下来。在切换页面时，页面不会进行重新加载。

一般情况下，如果不做特殊处理，会重新执行created 和 mounted生命周期，从而重新加载页面，默认就显示到第一页去了，就很烦。

（我的问题是，使用keep-alive了，但组件仍然不缓存，下面会解决）

二、认识下keep-alive

keep-alive是Vue提供的一个内置组件，被keep-alive组件包裹的内部组件，其状态将被缓存

keep-alive包裹的组件，其生命周期只能被执行一次，再次进入时不会被执行

keep-alive包裹的组件，会自动新增两个生命周期函数activated和deactivated，每次进入都会被执行
activated( ) 当keepalive包含的组件再次渲染时触发
deactivated( ) 当keepalive包含的组件销毁时触发

keep-alive两个属性include和exclude,可以让keep-alive实现有条件的进行缓存。include匹配到的组件会被进行缓存，exclude匹配到的组件不会被缓存

三、在组件中应用

//第一种：直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
//第二种：include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="ReportA，ReportB"
      <keep-alive include="ReportA">
         <component :is="comName"></component> 
      </keep-alive>
//第三种：include+正则表达式或者数组 这种情况必须用v-bind (:include="")
      <keep-alive :include="['ReportA']">
         <component :is="comName"></component>
      </keep-alive> 
//第四种：exclude 此时组件A内容不会被缓存，组件B内容会被缓存
      <keep-alive exclude="ReportA">
         <component :is="comName"></component>
      </keep-alive> 
//特殊情况：若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
      <keep-alive include="ReportA,ReportB" exclude="ReportA">
         <component :is="comName"></component>
      </keep-alive> 
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
  <keep-alive exclude="c" max="5">
     <component />
  </keep-alive>

参考链接:https://www.jb51.net/article/263316.htm

四、解决组件不缓存问题

我写了两个组件，一个房态的，一个列表，需要动态切换。
组件切换没问题，但每次都要加载created 和 mounted生命周期。（我搜索了下原因，都没用，后来又看了遍代码，突然发现问题）

原因：主要是引入的组件，export default{ } 默认输出，忘写名字。

下面是代码分享

主页面

//主页面
<template>
      <keep-alive include="ReportA,ReportB">
        <component :is="comName" > </component>
      </keep-alive>
</template>
<script>
import ReportA from './components/reportA.vue'
import ReportB from './components/reportB.vue'
export default {
  components: {
    ReportA,
    ReportB,
  },
}
</script>

子页面

<script>
export default {
  name: 'ReportA',    //需要默认输出的名字（两个页面都要）
}
</script>

五、keep-alive配合router使用

首先在router中为路由页面添加meta属性：

{
    path: '/tab',
    name: 'tab',
    meta:{
      keepAlive:true   //需要缓存
    },
    component: () => import('../views/Tab.vue')
  },
  {
    path: '/banner',
    name: 'banner',
    meta:{
      keepAlive:false   //不需要缓存
    },
    component: () => import('../views/Banner.vue')
  }

然后在App.vue中添加判断：

    //此处是为添加了keepAlive=true 的路由添加缓存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>   
     </keep-alive>
    //此处是为添加了keepAlive=false 的路由默认不缓存
      <router-view v-if="!$route.meta.keepAlive"/>

总结

到此这篇关于vue使用keep-alive进行组件缓存的文章就介绍到这了,更多相关vue使用keep-alive组件缓存内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE keep 方法 alive keep-alive 缓存

1024 个赞