vue keep |
您所在的位置:网站首页 › keep动态点赞 › vue keep |
一、作用
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 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |