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;

}

相关推荐
风止何安啊11 小时前
JS 里的 “变量租房记”:闭包是咋把变量 “扣” 下来的?
前端·javascript·node.js
老华带你飞11 小时前
社区养老保障|智慧养老|基于springboot+小程序社区养老保障系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·社区养老保障
Danny_FD11 小时前
用 ECharts markLine 标注节假日
前端·echarts
程序员西西11 小时前
SpringBoot无感刷新Token实战指南
java·开发语言·前端·后端·计算机·程序员
烛阴11 小时前
Luban集成CocosCreator完整教程
前端·typescript·cocos creator
有点笨的蛋11 小时前
深入理解 JavaScript 原型机制:构造函数、原型对象与原型链
前端·javascript
o***741711 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端
晴栀ay11 小时前
JS中原型式面向对象的精髓
前端·javascript
美幻11 小时前
前端复制功能在移动端失效?一文彻底搞懂 Clipboard API 的兼容性陷阱
前端
llxxyy卢11 小时前
XSS跨站之订单及shell箱子反杀记
前端·xss