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;

}

相关推荐
恋猫de小郭8 分钟前
Kotlin Toolchain 0.13,JetBrains 推荐 KMP 都切换到到全新工具链
android·前端·flutter
高级程序源9 分钟前
hive电商平台商品销售数据分析与趋势预测45659-计算机课程设计、毕业设计
vue.js·hive·spring boot·mysql·数据分析·django·课程设计
星夜离尘5621 分钟前
FIFO深度怎么定?用突发流量和背压算清缓存预算
缓存·fpga开发·verilog·fifo·背压
我是人✓21 分钟前
Java面向对象核心特性深度解析
java·前端·算法
晓得迷路了26 分钟前
栗子前端技术周刊第 149 期 - Vite+ 1.0、Preact 11、Next.js 16.4...
前端·javascript·react.js
IT_陈寒27 分钟前
为什么我的Vue组件总是莫名其妙更新?
前端·人工智能·后端
kyle~27 分钟前
软件缓存一致性
缓存
狂师29 分钟前
2026年APP自动化测试工具大全,12款主流工具一次看懂
前端·开源·测试
前端一小卒33 分钟前
搜索 API 额度用完返回空数组,Agent 就开始一本正经地胡说
前端·javascript·node.js
乘风gg40 分钟前
Spec Kit vs OpenSpec vs Superpowers:三大 AI Coding 框架深度对比
前端·ai编程·claude