重复请求缓存

EveryPossible2026-01-19 9:09

方案二：组件可能被缓存，也可能不被缓存（通用性最强）

如果这个组件有时在里，有时又在外面（或者你不确定），你需要同时保留两个钩子，但利用一个标志位 (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();
});