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