【vue】keep-alive:true缓存导致页面数据不刷新

keep-alive生命周期钩子函数:activated、deactivated

activated:页面第一次进入的时候,钩子触发的顺序是created->mounted->activated

deactivated: 页面退出的时候会触发deactivated,

当再次前进或者后退的时候只触发activated

使用<keep-alive>会将数据保留在内存中,

如果要在每次进入页面的时候获取最新的数据,

需要在activated阶段获取数据,

承担原来created钩子中获取数据的任务

复制代码
//router

meta:{
    author:'true',
    title:'缓存为true页面',
    keepAlive:'true'
}

//vue

activated(){
    this.getList()
},
相关推荐
188号安全攻城狮3 分钟前
【前端基础知识】JavaScript 数组方法总结:从表格速查到分类详解
开发语言·前端·javascript·网络安全
qq_381338503 分钟前
微前端架构深度实践:从 qiankun 到 Module Federation 的企业级方案
前端·架构
鱼干~7 分钟前
【全栈知识点】全栈开发知识点
前端·人工智能·c#
英俊潇洒美少年7 分钟前
迷你 React 调度器(带优先级+时间切片)手写实现
前端·javascript·react.js
chQHk57BN11 分钟前
PWA开发指南:构建可离线使用的渐进式Web应用
前端
weixin_4080996718 分钟前
【保姆级教程】按键精灵调用 OCR 文字识别 API(从0到1完整实战 + 可运行脚本)
java·前端·人工智能·后端·ocr·api·按键精灵
xdl259924 分钟前
CSS flex 布局中没有 justify-items
前端·css
百撕可乐24 分钟前
WenDoraAi官网NextJS实战04:HTTP 请求封装与SSR
前端·网络·网络协议·react.js·http
Sestid26 分钟前
前端AI编程使用技巧(后续会更新cursor和claude code for vscode)
前端·vscode·ai编程·claude·cursor