vue keep

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

vue keep

2024-07-10 02:21:19| 来源: 网络整理| 查看: 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属性,设置需要缓存的组件)



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭