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;

}

相关推荐
用户1733598075375 分钟前
纯前端实现PDF合并、拆分、压缩:技术方案与踩坑记录
前端
工会代表6 分钟前
frps配置,以linux服务器以及windows客户端进行远程桌面内网穿透为例。
前端
用户713874229008 分钟前
Promise 与 Async Await 深度解析
前端
董董灿是个攻城狮9 分钟前
5分钟入门卷积算法
前端
用户580481700292811 分钟前
我用 MCP 给小程序开发做了个 AI 副驾驶,开源了
前端
雨季mo浅忆13 分钟前
记录利用Cursor快速实现Excel共享编辑
前端·excel
皮皮大人15 分钟前
Vue 3 响应式内核完全解密:reactive & effect 与 Vue 2 Watcher 史诗对决
前端·vue.js
LaughingZhu16 分钟前
Product Hunt 每日热榜 | 2026-05-31
前端·人工智能·经验分享·搜索引擎·chatgpt·html
陆枫Larry17 分钟前
CSS 中「深色 + 不透明度」vs 直接设浅色的区别
前端
Din18 分钟前
使用AI从 27 秒到秒开:一次 Web 首屏加载优化实战
前端