vue开启keep-alive缓存时，关于子组件上使用:key=“id“的问题以及解决方案
创始人
2024-11-14 16:34:13
0次
开启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;
}
相关内容
热门资讯
第十分钟了解！欢乐对决脚本辅助...
第十分钟了解！欢乐对决脚本辅助器ios，青橙竞技辅助器怎么安装（本来是有挂）1、青橙竞技辅助器怎么安...
透视黑科技!wpk透视工作室(...
透视黑科技!wpk透视工作室(透视)永久脚本辅助器(详细辅助解密教程)1、wpk透视工作室透视辅助简...
透视脚本"hhpok...
透视脚本"hhpoker怎么防作弊"详细辅助线上教程(总是真的有挂)；hhpoker怎么防作弊软件透...
4分钟了解！拼十app辅助，广...
4分钟了解！拼十app辅助，广东雀神智能插件安装辅助器（竟然是真的有挂）1、广东雀神智能插件安装辅助...
透视最新!wepoker公共底...
透视最新!wepoker公共底牌(透视)永久脚本辅助软件(详细辅助微扑克教程)1、wepoker公共...
透视黑科技"德普之星...
透视黑科技"德普之星透视辅助"详细辅助攻略教程(切实存在有挂)；1、全新机制【德普之星透视辅助软件透...
十分钟了解！小闲川南辅助，决战...
十分钟了解！小闲川南辅助，决战卡五星作弊（确实是有挂）；1、每一步都需要思考，不同水平的挑战会更加具...
透视真的!hhpoker辅助挂...
透视真的!hhpoker辅助挂下载(透视)永久脚本辅助助手(详细辅助第三方教程)1、起透看视 hhp...
透视线上"newpo...
透视线上"newpoker怎么安装脚本"详细辅助wpk教程(一直真的有挂)；1、每一步都需要思考，不...
第十分钟了解！乐达大连穷胡小鸡...
第十分钟了解！乐达大连穷胡小鸡满天飞，多乐游戏修改器（其实真的有挂）；1、乐达大连穷胡小鸡满天飞透视...