vue keep-alive 缓存不生效解决方案

一、作用

 vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据

二、用法

与**【动态组件】**一起使用：（会缓存不活动的组件实例，而不是销毁它们）

<keep-alive><component :is="view"></component>
</keep-alive>

与**【vue-router】**一起用：

<keep-alive><router-view></router-view>
</keep-alive>

三、设置缓存条件

【include】 和 【exclude】（2.1.0新增）

逗号分隔字符串： <keep-alive include="a,b">
正则表达式 (使用 v-bind)： <keep-alive :include="/a|b/">
数组 (使用 v-bind)：<keep-alive :include="['a', 'b']">
【max】 (2.5.0新增)

数字。最多可以缓存多少组件实例：<keep-alive :max="10">

四、相关钩子函数

【activated】 和 【deactivated】
在 2.2.0 及其更高版本中，activated 和 deactivated 将会在树内的所有嵌套组件中触发。

keep-alive的页面：
第一次进入：created-> mounted-> activated，退出：deactivated。
再次进入，触发activated（这时我们可以拿到组件的所有data，可在此节点做一些请求更新页面数据）

五、！！！keep-alive不生效实例

订单页面A（有tab标签），点击跳转到详情页面B，当详情页B返回到订单tab列表页B时，需要保持之前的tab选中状态。
keep-alive设置

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

router设置

   {path: '/list'，name: 'List',component: () => import('@/views/order/list'),meta: {keepAlive: true}   // 设置页面缓存，保持tab状态},{path: '/detail'，name: 'Detail',component: () => import('@/views/order/detail'),meta: {keepAlive: false}   // 不需要缓存},

结果发现，订单tab列表页缓存并没有生效！！！
原因分析：

通过v-if来判断是否生成keep-alive，当列表页面A符合条件时，内存缓存了组件状态。当跳转到详情页B时，不符合条件，由于v-if是挂载到keep-alive标签上，会把之前keep-alive的列表页面A进行销毁，再次进入到A会重新创建。

正确写法：
写法一：（v-if挂载到router-view上面）

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

写法二：(使用include属性，设置需要缓存的组件)

<keep-alive include="List"><router-view></router-view>
</keep-alive>

vue keep-alive 缓存不生效解决方案相关推荐

Vue组件设置缓存kepp-alive 后如何获取数据
Vue组件设置缓存kepp-alive 后如何获取数据解决方案 : beforeRouteEnter activated beforeRouteEnter 每次进去组件渲染时,都会执行beforeR ...
备战面试日记（6.2） - （缓存相关.缓存问题以及解决方案）
本人本科毕业,21届毕业生,一年工作经验,简历专业技能如下,现根据简历,并根据所学知识复习准备面试. 记录日期:2022.1.23 大部分知识点只做大致介绍,具体内容根据推荐博文链接进行详细复习. 文 ...
alive的不生效 keep vue_vue解决使用webpack打包后keep-alive不生效的方法
问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下 ...
vue暂存功能_示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. #Vue 实现组件信息的缓存当我 ...
业务层面缓存穿透的解决方案
业务层面缓存穿透的解决方案参考文章: (1)业务层面缓存穿透的解决方案 (2)https://www.cnblogs.com/luyulong/p/5448713.html 备忘一下.
angular 前端路由不生效解决方案
angular 前端路由不生效解决方案参考文章: (1)angular 前端路由不生效解决方案 (2)https://www.cnblogs.com/weihanli/p/fix-angular-f ...
缓存穿透、缓存击穿、缓存雪崩及其解决方案
缓存穿透.缓存击穿.缓存雪崩及其解决方案参考文章: (1)缓存穿透.缓存击穿.缓存雪崩及其解决方案 (2)https://www.cnblogs.com/zhangww/p/9942390.html ...
zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案
zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案, zTree新的根结点不能异步刷新,reAsyncChildNodes不生效解决方案, reAsyncChildNo ...
redis缓存失效及解决方案
缓存失效及解决方案 2018年11月16日 09:38:11 隔壁阿源阅读数 758更多分类专栏: 架构版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处 ...

vue keep-alive 缓存不生效解决方案

一、作用

二、用法

三、设置缓存条件

四、相关钩子函数

五、！！！keep-alive不生效实例

vue keep-alive 缓存不生效解决方案相关推荐

最新文章

热门文章

vue keep-alive 缓存 不生效解决方案

一、作用

二、用法

三、设置缓存条件

四、相关钩子函数

五、！！！keep-alive不生效实例

vue keep-alive 缓存 不生效解决方案相关推荐

最新文章

热门文章

vue keep-alive 缓存不生效解决方案

vue keep-alive 缓存不生效解决方案相关推荐