重复请求缓存

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

如果这个组件有时在 里,有时又在外面(或者你不确定),你需要同时保留两个钩子,但利用一个标志位 (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();
});
相关推荐
梅孔立12 小时前
两种免费的翻译API调用方式详解 - Edge官方API与个人缓存服务
前端·缓存·edge
gwf21612 小时前
SSD读写速度深度解析:顺序读写vs随机读写、IOPS、延迟,你的硬盘性能到底怎么看?
git·嵌入式硬件·缓存·github·智能硬件
番茄炒鸡蛋加糖15 小时前
缓存三大问题
缓存
江晓鱼未暖20 小时前
十七、Redis 核心原理与架构详解
大数据·数据库·数据仓库·redis·缓存·架构
小罗水20 小时前
第13章 Redis 缓存、幂等锁与任务状态
数据库·redis·缓存
热心市民lcj20 小时前
Spring Boot 整合 Caffeine 本地缓存实战
spring boot·后端·缓存
zx1154501 天前
【热点 Key 探测与加长缓存 TTL 实战】
缓存
toooooop81 天前
如何用 ss + ps 精准定位本机 Redis 的“隐形”消费者?
linux·数据库·redis·缓存
软萌萌的11 天前
C#中的多级缓存架构设计与实现深度解析
缓存·c#·wpf
醉城夜风~2 天前
HTML表单域学习博客:表单标签、输入框、按钮详解
android·java·缓存