重复请求缓存

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

如果这个组件有时在 里,有时又在外面(或者你不确定),你需要同时保留两个钩子,但利用一个标志位 (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();
});
相关推荐
不会写DN2 小时前
Go 项目中 Redis 缓存的实用设计与实现(Cache-Aside 模式)
redis·缓存·golang
aXin_ya2 小时前
Redis 网络模型 内存回收
数据库·redis·缓存
.柒宇.3 小时前
Redis
数据库·redis·缓存
苏渡苇4 小时前
Redis 版本演进、新特性与协议那些事儿
数据库·redis·缓存·开源协议·redis版本·redis新特性
鬼蛟4 小时前
Nacos
数据库·redis·缓存
码农阿豪4 小时前
一次 AI 调用 15 万 Token 只花了 $0.058?彻底搞懂 Token、缓存读、补全计费机制!(附完整架构图)
人工智能·spring·缓存
Ai搬运工14 小时前
【保姆级教程】B站缓存视频如何转为正常MP4格式?
缓存·音视频·bilibili
敲上瘾4 小时前
高并发内存池(三):PageCache(页缓存)的实现
linux·c++·缓存·高并发内存池·池化技术
快点好好学习吧4 小时前
CPU 从 L1/L2 缓存读取 MySQL 代码指令的庖丁解牛
android·mysql·缓存
awljwlj4 小时前
黑马点评复习—缓存相关【包含可能的问题和基础知识复习】
java·后端·spring·缓存