VUE工程的keep-alive缓存机制(全部缓存、部分缓存、定向缓存)

目录

 

应用场景

解决思路

一、缓存所有页面

二、缓存部分页面

三、页面缓存了,有的功能需要再进入后,仍然重新执行的怎么办

四、执行前进刷新,后退时候缓存

五、页面B进入页面A需要缓存,页面C进入页面A不需要缓存



 

应用场景

1、vue工程,很多时候希望页面不管怎么跳转,返回时候,页面都能保持之前的操作状态,

2、页面跳转不用每次都执行mounted,特别很多请求数据时候,都是从mounted发起,不需要每次跳转都执行一次请求数据。

这就需要使用vue的keep-alive缓存。

解决思路

一、缓存所有页面

如果需要缓存所有页面,就在使用router-view中地方(一般都是app.vue,但也不绝对是,就是控制要缓存的页面router跳转的上一级直接router-view的地方)外围包上<keep-alive></keep-alive>标签

<template>
      <div id="app">
        <keep-alive >
          <router-view></router-view>
        </keep-alive>
      </div>
 </template>

二、缓存部分页面

缓存部分页面,一般有两种方式:

(1)使用router.meta属性

router-view文件中:(app.vue)

<template>
      <div id="app">
        <keep-alive >
          <router-view v-if="$route.meta.keepAlive"></router-view>   //放需要缓存的组件
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>  //放不需要缓存的组件
      </div>
    </template>

路由配置文件router.js文件中,给需要缓存的路由加上meta属性,并设置值。

{
      path: '/usermanage',
      name: 'usermanage',
      meta: {
        keepAlive: true, //该字段表示该页面需要缓存
      },
      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
    },

(2)使用vue-router 2.X的include、exclude两个属性,针对性的缓存相应的组件

include属性表示只有name属性为a,b的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存exclude属性表示除了name属性为a,b的组件不会被缓存,其它组件都会被缓存

在使用router-view标签的vue文件中修改:

<keep-alive include="a,b">
   <router-view></router-view>
</keep-alive>

注意:上面代码中的a,b是需要缓存的组件中的的name值(a.vue中的name值),不是路由的name值。

三、页面缓存了,有的功能需要再进入后,仍然重新执行的怎么办

当引入keep-alive的时候,页面第一次进入钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。再次进入(前进或者后退)时,只触发activated

事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中, activated 中的不管是否需要缓存多会执行。

注意:当组件在 <keep-alive> 内被切换时,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated:进入页面时候执行

activated(){

},

deactivated:退出页面时候执行

deactivated(){

},

四、执行前进刷新,后退时候缓存

参照五、需要在加一个变量,确定从哪里到哪里是前进,从哪里到哪里是后退

(1)router.js中,A的路由设置

{
      path: '/usermanage',
      name: 'usermanage',
      meta: {
        keepAlive: true, //该字段表示该页面需要缓存
        isBack: false, //用于判断上一个页面是哪个
        title: '人员管理'
      },
      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
    },

(2)其他页面中,,利用路由钩子函数,修改isback这个值,

五、页面B进入页面A需要缓存,页面C进入页面A不需要缓存

思路:在每个路由的路由钩子函数beforeRouteLeave(to, from, next)钩子中设置 to.meta.keepAlive的true或者false值。

具体流程

(1)router.js中,A的路由设置:

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
    }
}

(2)C.vue文件中:

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        if(from.name=="C的路由名字"){
            to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存,即刷新,to表示要跳转的A
        }
        next();
    }
};

(3)B.vue

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        if(from.name=="B的路由名字"){
            to.meta.keepAlive = true; // C 跳转到 A 时让 A 不缓存,即刷新,to表示要跳转的A
        }
        next();
    }
};

 

 

 

 

 

 

Vuekeep-alive缓存实现是通过在组件的生命周期中定义了三个钩子函数来实现的。这三个钩子函数分别是created、destroyed和mounted。在created钩子函数中,会初始化两个对象,分别是缓存VNode(虚拟DOM)和VNode对应的键集合。在destroyed钩子函数中,会遍历调用pruneCacheEntry函数删除缓存的VNode实例。在mounted钩子函数中,会实时监听黑白名单的变动,并根据变动来更新缓存。具体的实现代码可以在keep-alive.js文件中找到。\[1\]\[2\] 如果想要对部分组件进行缓存,可以在组件的模板中使用<keep-alive>标签,并在需要缓存的组件上添加meta属性,值为keepAlive。例如,在app.vue文件中,可以使用<keep-alive>标签包裹需要缓存的组件,并在组件的<router-view>标签上添加v-if="$route.meta.keepAlive"条件判断。这样就可以实现对指定组件的缓存效果。\[3\] #### 引用[.reference_title] - *1* *2* [Vue中利用keep-alive-快速实现页面缓存-案例](https://blog.csdn.net/JackieDYH/article/details/119913544)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [示例vuekeep-alive缓存功能的实现](https://blog.csdn.net/weixin_34029949/article/details/91458411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值