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;

}

相关推荐
苏渡苇几秒前
Redis 版本演进、新特性与协议那些事儿
数据库·redis·缓存·开源协议·redis版本·redis新特性
鬼蛟6 分钟前
Nacos
数据库·redis·缓存
Linux运维技术栈13 分钟前
Cloudflare Argo Smart Routing全球加速:优化跨境回源链路,提升跨区域访问体验
大数据·前端·数据库
码农阿豪24 分钟前
一次 AI 调用 15 万 Token 只花了 $0.058?彻底搞懂 Token、缓存读、补全计费机制!(附完整架构图)
人工智能·spring·缓存
Ai搬运工124 分钟前
【保姆级教程】B站缓存视频如何转为正常MP4格式?
缓存·音视频·bilibili
敲上瘾27 分钟前
高并发内存池(三):PageCache(页缓存)的实现
linux·c++·缓存·高并发内存池·池化技术
快点好好学习吧29 分钟前
CPU 从 L1/L2 缓存读取 MySQL 代码指令的庖丁解牛
android·mysql·缓存
awljwlj30 分钟前
黑马点评复习—缓存相关【包含可能的问题和基础知识复习】
java·后端·spring·缓存
恋猫de小郭1 小时前
Android CLI ,谷歌为 Android 开发者专研的 AI Agent,提速三倍
android·前端·flutter
freewlt1 小时前
从 0 搭建现代前端组件库:2026年完整实战指南
前端