vue keep

您所在的位置:网站首页 keep动态点赞 vue keep

vue keep

2024-07-10 00:14| 来源: 网络整理| 查看: 265

一、作用 vue 【缓存】方案,保留组件状态或避免重新渲染,能够缓存当前页面的所有数据 二、用法 与**【动态组件】**一起使用:(会缓存不活动的组件实例,而不是销毁它们) 与**【vue-router】**一起用: 三、设置缓存条件

【include】 和 【exclude】(2.1.0新增)

逗号分隔字符串: 正则表达式 (使用 v-bind): 数组 (使用 v-bind):

【max】 (2.5.0新增)

数字。最多可以缓存多少组件实例:

四、相关钩子函数

【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设置

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上面)

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3