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;

}

相关推荐
街尾杂货店&20 小时前
css word-spacing属性
前端·css
千叶寻-20 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
心勤则明21 小时前
Spring AI 会话记忆实战:从内存存储到 MySQL + Redis 双层缓存架构
人工智能·spring·缓存
光影少年1 天前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天1 天前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_1 天前
HTML5(前端基础)
前端·html·html5
Jagger_1 天前
敏捷开发流程-精简版
前端·后端
FIN66681 天前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing1 天前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1271 天前
浏览器为何屏蔽本地文件路径?
前端