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;

}

相关推荐
snow@li2 分钟前
数据库-Oracle:常用语法 / Oracle 核心知识技能梳理
数据库·redis·缓存
明月_清风9 分钟前
Nginx 生产环境配置完全指南:从安全加固到性能调优
前端·nginx
用户6000718191011 分钟前
【翻译】用 Reanimated CSS 动画为 TextInput 添加发光效果
前端
李剑一16 分钟前
前后端命名冲突?驼峰与下划线的统一方案(附可直接复用代码)
前端
用户114818678948420 分钟前
Git Stash 丢失后的完整找回指南
前端·git
代码不加糖21 分钟前
2026 React 面试“通关秘籍”:高频 12 问 + 深度解析(含Hooks源码思想)
前端·react.js·面试
我滴老baby21 分钟前
ReAct推理模式详解让智能体学会边思考边行动
前端·react.js·前端框架
菜鸟小码36 分钟前
MapReduce 核心阶段深度解析:Map 阶段与 Reduce 阶段的作用及执行流程
前端·javascript·mapreduce
步步为营DotNet37 分钟前
深入剖析.NET 11 中 Semantic Kernel 于智能后端集成的创新实践
前端·.net·easyui
@大迁世界1 小时前
33.如何在 React 中使用内联样式(inline styles)?
前端·javascript·react.js·前端框架·ecmascript