亲宝软件园·资讯

展开

vue使用keep-alive组件缓存

pipizhou16 人气:1

一、使用场景

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

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

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

二、 认识下keep-alive

  1. keep-alive是Vue提供的一个内置组件,被keep-alive组件包裹的内部组件,其状态将被缓存
  2. keep-alive包裹的组件,其生命周期只能被执行一次,再次进入时不会被执行
  3. keep-alive包裹的组件,会自动新增两个生命周期函数activated和deactivated,每次进入都会被执行
    activated( ) 当keepalive包含的组件再次渲染时触发
    deactivated( ) 当keepalive包含的组件销毁时触发
  4. 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"/>   

总结

加载全部内容

相关教程
猜你喜欢
用户评论