重复请求缓存

方案二:组件可能被缓存,也可能不被缓存(通用性最强)

如果这个组件有时在 里,有时又在外面(或者你不确定),你需要同时保留两个钩子,但利用一个标志位 (Flag) 来过滤掉首次的重复调用。

原理: 利用一个变量标记"是否是首次加载"。onMounted 负责首次加载,onActivated 负责后续的激活,但通过标志位跳过第一次 onActivated 的执行。

javascript 复制代码
import { ref, onMounted, onActivated } from 'vue';

const isFirstLoad = ref(true); // 标记是否为首次加载

const loadData = () => {
  console.log('发起请求...');
  // 具体的请求逻辑
};

onMounted(() => {
  loadData();
  // onMounted 执行完,不仅代表挂载完成,也消耗了"首次"的机会
  // 注意:这里不需要设为 false,逻辑主要由 onActivated 控制
});

onActivated(() => {
  // 如果是首次加载(刚执行过 onMounted),则跳过
  if (isFirstLoad.value) {
    isFirstLoad.value = false; // 将锁解开,为下一次缓存激活做准备
    return;
  }
  
  // 只有非首次(从缓存切回来)才执行
  loadData();
});
相关推荐
秦jh_2 小时前
【Redis】Set和Zset
数据库·redis·缓存
菜鸟程序员专写BUG7 小时前
SpringBoot整合Redis报错全集|连接超时/序列化/缓存穿透/分布式锁踩坑全解决
spring boot·redis·缓存
历程里程碑9 小时前
链表--LRU缓存
大数据·数据结构·elasticsearch·链表·搜索引擎·缓存
balmtv9 小时前
GPT vs Gemini 架构硬核对决:MoE路由、KV缓存与长上下文推理工程实现深度
gpt·缓存·架构
q5431470879 小时前
Window下Redis的安装和部署详细图文教程(Redis的安装和可视化工具的使用)
数据库·redis·缓存
xkxnq10 小时前
第六阶段:Vue生态高级整合与优化(第96天) Vue i18n优化:语言包按需加载+缓存当前语言+避免页面刷新失效
前端·vue.js·缓存
zjeweler11 小时前
redis_tools_gui_v1.2 —Redis图形化漏洞利用工具
数据库·redis·web安全·缓存·安全性测试
夜空下的星11 小时前
使用redisson操作redis详解
数据库·redis·缓存
weixin_4563216411 小时前
生产环境Redis部署选型最佳实践
数据库·redis·缓存
FL4m3Y4n11 小时前
Redis相关命令与原理
数据库·redis·缓存