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;

}

相关推荐
泯泷6 小时前
手搓JSVMM第 8 篇:函数调用:参数、返回值与调用帧
前端·javascript·前端框架
Sherotree7 小时前
Google Antigravity——Agent 被提到主界面
前端·ide·后端·edge浏览器
里欧跑得慢7 小时前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢8 小时前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器,实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战(适配鸿蒙 HarmonyOS Next ohos)
android·前端·安全·flutter·华为·harmonyos
IT毕设实战小研8 小时前
基于安卓的空气质量查询系统
android·大数据·vue.js·爬虫·python·django·课程设计
苏灿烤鱼8 小时前
没有机密文件,也没有付费数据,在浏览器里造一颗"间谍卫星"
前端·javascript·github
泯泷9 小时前
手搓JSVM第 5 篇:写第一个编译器:从 AST 生成 IR
前端·javascript·算法
泯泷9 小时前
手搓JSVM第 7 篇:控制流:if、while 与 jump
前端·javascript·算法
泯泷9 小时前
手搓JSVM第 6 篇:把 IR 编成字节码:emit 与 label fixup
前端·javascript·算法
泯泷9 小时前
手搓JSVM第 3 篇:从栈式 VM 到寄存器式 VM:为什么我们选择寄存器
前端·javascript·算法