重复请求缓存

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

如果这个组件有时在 里,有时又在外面(或者你不确定),你需要同时保留两个钩子,但利用一个标志位 (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();
});
相关推荐
189228048617 小时前
NY386固态MT29F32T08GWLBHD6-T:B
大数据·服务器·人工智能·科技·缓存
半夜修仙8 小时前
Redis中String数据类型的常见命令
数据库·redis·缓存
小碗羊肉10 小时前
【Redis | 第三篇】缓存(Cache)
数据库·redis·缓存
深念Y10 小时前
理解大模型API缓存机制:从Claude Code的缓存失效到DeepSeek的硬盘缓存
缓存·ai·api·提示词·kvcache·vibecoding·claudecode
半夜修仙11 小时前
Redis中ZSet数据类型的常见命令
数据库·redis·缓存
努力努力再努力wz12 小时前
【Redis入门系列】:Redis 内部编码机制与 String 深度解析:SDS 底层实现、三种编码与核心命令详解
c语言·开发语言·数据结构·数据库·c++·redis·缓存
晚烛13 小时前
CANN 数据增强 on NPU:训练数据增强的 NPU 加速实战
人工智能·python·深度学习·缓存·数据挖掘
IT_Octopus1 天前
Spring Boot 实战:@PostConstruct + Caffeine 缓存初始化与定时刷新
spring boot·后端·缓存
Java面试题总结1 天前
java高频面试题(2026最新)
java·开发语言·jvm·数据库·spring·缓存
AI技术控1 天前
KV Cache 缓存机制的原理和应用:从 Transformer 推理到大模型服务优化
人工智能·python·深度学习·缓存·自然语言处理·transformer