vue使用keep-alive组件缓存

时间:2022-09-29 pipizhou16 人气:1

一、使用场景

在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:

四、解决组件不缓存问题

我写了两个组件，一个房态的，一个列表，需要动态切换。
组件切换没问题，但每次都要加载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"/>

总结

加载全部内容