vue开启keep-alive缓存时,关于子组件上使用:key=“id“的问题以及解决方案

开启keep-alive缓存时,第一次进入某功能时,created -> mounted -> activated,退出时触发 deactivated,

当再次进入时,只触发activated

vue开启keep-alive缓存时(路由meta.noCache不为true),组件上存在:key="id"会有两个问题:

1、切换tag,会触发id的变更,再次切回来时,将会触发表格销毁重建,重新请求数据,局部刷新表格的缓存丢失;

2、致命错误,修改URL的id时,缓存之前有数据,子组件销毁重建,请求接口也有数据,但是因为keep-alive缓存了组件实例而不是组件的数据,表格的数据丢失;

特定场景下,必须使用:key="id"时,可以考虑下面的两个方式

1、:key="formData.id + ''";初始化时,formData = { id: this.id, } ------ keep-alive缓存activated时,不会重新请求

2、:key="timeStap",结合activated、deactivated ------ ------ keep-alive缓存activated时,会重新请求

activated() {

if (this.fromKeepAlive) { //* 来自keep-alive缓存的组件实例

this.timeStap = new Date().getTime()

}

}

deactivated() {

this.fromKeepAlive = true;

}

相关推荐
css趣多多4 分钟前
ref和reactive
前端
leo_2324 分钟前
前端&前端程序--SMP(软件制作平台)语言基础知识之六十
前端·开发工具·企业信息化·smp(软件制作平台)·应用系统
Charlie_lll5 分钟前
学习Three.js–柱状图
前端·3d·three.js
前端程序猿i9 分钟前
流式输出场景下的「双区域渲染」:让第三方 DOM 操作在 Vue 响应式更新中存活
前端·javascript·vue.js
css趣多多13 分钟前
setup() 函数与语法糖
前端·javascript·vue.js
前端程序猿i20 分钟前
第 3 篇:消息气泡组件 —— 远比你想的复杂
开发语言·前端·javascript·vue.js
鸡蛋豆腐仙子21 分钟前
redis及实现分布式锁的原理
java·redis·分布式·学习·缓存
1314lay_100725 分钟前
color: var(--el-color-success); CSS里面使用函数
前端·css
墨染青竹梦悠然27 分钟前
基于SpringBoot + vue的农产品销售系统(华夏鲜仓)
vue.js·spring boot·python·django·毕业设计·毕设