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;

}

相关推荐
大文说跨境1 分钟前
亚马逊多店铺用过多款指纹浏览器,说点长期用的实际感受
前端·网络
中屹指纹浏览器svip11 分钟前
中屹指纹浏览器和普通 Chrome 有什么区别?
前端·chrome·中屹指纹浏览器
码士集团小青13 分钟前
Redis 缓存击穿(失效)、缓存穿透、缓存雪崩怎么解决?
数据库·redis·缓存
码士集团小青21 分钟前
硬核 | Redis 布隆(Bloom Filter)过滤器原理与实战
数据库·redis·缓存
feixing_fx26 分钟前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3
Lank_M31 分钟前
JPG的8×8块里只要有条边,白底就保不住255
前端
coding漫漫长路34 分钟前
主图纯白检测,阈值放宽到250会放过252的底
前端
计算机魔术师35 分钟前
藏了八个月没被当漏洞的洞,AI红队一晚上翻出来了
前端
用户831348593069837 分钟前
Vue3 v-for:常用用法与开发高频坑点
前端·javascript·vue.js
用户6210075870240 分钟前
Web 3D 开发实践:BIM+GIS 融合需要解决哪些技术问题?
前端·three.js