3841 字
19 分钟
Vue3 响应式数据缓存实战：基于 Store 层的智能缓存策略设计与实现
Vue3 响应式数据缓存实战：基于 Store 层的智能缓存策略设计与实现
引言
在现代前端应用开发中，数据请求优化是提升用户体验的关键环节。频繁的 API 请求不仅会增加服务器负载，还会导致页面加载缓慢、用户体验下降。尤其在多页面共享数据的管理系统中，用户频繁切换页面、查看不同模块数据时，很容易产生大量重复的无效请求。
本文将结合鸟场管理系统的实战经验，介绍一套基于 Vue3 响应式系统的 Store 层智能缓存策略，通过 5 分钟数据过期周期配合惰性更新机制，成功将系统 API 请求量减少了 60%，大幅提升了页面响应速度与用户体验。
一、整体架构设计
在介绍具体实现之前，我们先来看一下这套缓存策略的整体架构，它深度嵌入到我们的前后端交互流程中：
1.1 系统分层架构
┌─────────────────────────────────────────────────────────────────────────────┐│ 前端应用层 (Vue3) ││ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ││ │ HomePage │ │ Data.vue │ │ DevicePage │ ││ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ ││ │ │ │ ││ └─────────────────────┼─────────────────────┘ ││ ▼ │└─────────────────────────────────────────────────────────────────────────────┘ │ ▼┌────────────────────────────────────────────────────────────────────────────┐│ Store 层 (deviceStore.ts) ││ ││ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ││ │ devices (ref) │ │deviceHistory(ref)| │ deviceLogs(ref) │ ││ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ ││ │ │ │ ││ └────────────────────┼────────────────────┘ ││ ▼ ││ ┌─────────────────────────────────────────────────────────────────┐ ││ │ 缓存策略核心 │ ││ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ ││ │ │ 5分钟过期检查 │ │ 惰性更新策略 │ │ 设备级缓存隔离 │ │ ││ │ └──────────────┘ └──────────────┘ └──────────────┘ │ ││ └─────────────────────────────────────────────────────────────────┘ ││ │ ││ │ getOrUpdate │└─────────────────────────────────┼──────────────────────────────────────────┘ ▼┌─────────────────────────────────────────────────────────────────────────────┐│ API 层 (api.ts) ││ ││ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ││ │ Token自动刷新 │ │ 请求拦截器 │ │ 响应拦截器 │ │ 并发请求队列 │ ││ │ │ │ │ │ 401处理 │ │ │ ││ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ ││ │└─────────────────────────────────────────────────────────────────────────────┘ ▼┌─────────────────────────────────────────────────────────────────────────────┐│ 后端 API ││ ││ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ││ │ /api/devices │ │ /api/sensors │ │ /api/refresh │ ││ └─────────────────┘ └─────────────────┘ └─────────────────┘ ││ │└─────────────────────────────────────────────────────────────────────────────┘1.2 缓存层级结构
我们的缓存系统采用了三级分层设计，确保缓存的有效性与可控性：
┌─────────────────────────────────────────────────────────────┐│ 缓存层级架构 │├─────────────────────────────────────────────────────────────┤│ ││ ┌─────────────────────────────────────────────────────┐ ││ │ Level 1: 内存缓存 (Vue ref) │ ││ │ • devices: Device[] │ ││ │ • deviceHistoryData: DeviceHistoryData[] │ ││ │ • 生命周期: 页面会话期间 │ ││ │ • 更新方式: 响应式自动同步 │ ││ └─────────────────────────────────────────────────────┘ ││ │ ││ ▼ ││ ┌─────────────────────────────────────────────────────┐ ││ │ Level 2: 时间戳管理 │ ││ │ • lastUpdateTime: Date │ ││ │ • lastHistoryUpdateTime: Map<deviceId, Date> │ ││ │ • 过期策略: 5分钟 (DATA_UPDATE_INTERVAL) │ ││ └─────────────────────────────────────────────────────┘ ││ │ ││ ▼ ││ ┌─────────────────────────────────────────────────────┐ ││ │ Level 3: API 请求控制 │ ││ │ • 惰性检查: 访问时判断 │ ││ │ • 并发控制: isRefreshing 标志 │ ││ │ • Token刷新: 队列管理 │ ││ └─────────────────────────────────────────────────────┘ ││ │└─────────────────────────────────────────────────────────────┘二、核心方案的设计与实现
2.1 核心设计原则
这套缓存策略围绕以下核心原则设计，确保在性能与数据新鲜度之间取得平衡：
-
时间驱动缓存：数据在 5 分钟内被视为 "新鲜"，超过 5 分钟才触发新的 API 请求，适配管理系统的数据更新频率
-
响应式数据流：基于 Vue3 的
ref响应式系统，确保缓存数据变更时，所有使用该数据的组件 UI 自动更新 -
智能更新策略：封装统一的
getOrUpdateXXX方法，调用方无需关心缓存逻辑，方法自动判断是否需要重新获取数据 -
细粒度缓存隔离：针对不同设备的历史数据，实现独立的缓存时间管理，避免单设备更新影响全局缓存
2.2 Store 层核心代码实现
我们将所有缓存逻辑封装在 Pinia Store 中，对外提供统一的调用接口：
import { ref, computed } from 'vue';import { api } from '@/utils/api';
// ==================== 1. 响应式状态定义 ====================// 缓存的响应式数据const devices = ref<Device[]>([]);const deviceHistoryData = ref<DeviceHistoryData[]>([]);const deviceLogs = ref<DeviceLog[]>([]);
// ==================== 2. 缓存周期配置 ====================const DATA_UPDATE_INTERVAL = 5 * 60 * 1000; // 5分钟过期时间
// ==================== 3. 缓存时间戳管理 ====================// 全局数据更新时间const lastUpdateTime = ref<Date | null>(null);// 设备级历史数据更新时间（每个设备独立管理）const lastHistoryUpdateTime = ref<Map<number, Date>>(new Map());
// ==================== 4. 缓存过期检查逻辑 ====================const shouldUpdateData = () => { // 首次访问，无缓存 if (!lastUpdateTime.value) return true;
const now = new Date(); // 超过5分钟过期 const isExpired = now.getTime() - lastUpdateTime.value.getTime() > DATA_UPDATE_INTERVAL; // 数据为空 const isEmpty = devices.value.length === 0;
return isExpired || isEmpty;};
// ==================== 5. 智能获取/更新方法 ====================// 全局设备数据的智能获取const getOrUpdateDevices = async () => { if (shouldUpdateData()) { await fetchDevices(); await fetchAllSensorsData(); // ... 其他关联数据获取 } return devices.value;};
// 设备级历史数据的智能获取 - 每个设备独立控制缓存时间const getOrUpdateDeviceHistoryData = async (deviceId?: number) => { if (deviceId !== undefined) { const existingData = deviceHistoryData.value.filter(d => d.deviceId === deviceId); const lastUpdate = lastHistoryUpdateTime.value.get(deviceId);
// 检查当前设备的缓存是否需要更新 const needsUpdate = existingData.length === 0 || !lastUpdate || (new Date().getTime() - lastUpdate.getTime() > DATA_UPDATE_INTERVAL);
if (needsUpdate) { console.log(`[Cache Miss] 设备 ${deviceId} 需要更新历史数据`); await fetchDeviceHistoryData(deviceId); } else { console.log(`[Cache Hit] 设备 ${deviceId} 使用缓存的历史数据`); } }};2.3 惰性过期更新机制
传统的定时轮询方案会不管用户是否访问，都定期请求数据，造成大量资源浪费。这套方案没有采用这种方式，而是选择了惰性检查的更新策略：仅当用户访问数据时，才检查缓存是否过期，过期则触发更新。
两种更新机制的对比
| 机制 | 实现方式 | 请求频率 | 适用场景 |
|---|---|---|---|
| 定时轮询 | setInterval | 固定间隔，可能浪费 | 实时性要求极高 |
| 惰性检查 | 访问时判断 | 按需触发，节省资源 | 一般数据展示 |
| 具体的实现逻辑非常简单，在获取数据的方法中嵌入过期检查： |
// 不是使用setInterval定时轮询，而是在数据访问时检查const getOrUpdateDevices = async () => { if (shouldUpdateData()) { // 只有数据过期时才发起请求 await fetchDevices(); } // 始终返回当前缓存，保证用户可以立即看到数据 return devices.value;};缓存自动清理
为了避免缓存数据无限增长导致内存占用过高，我们还实现了自动的旧数据清理逻辑，针对日志类数据，仅保留最近 7 天的内容：
// 日志缓存清理 - 保留最近7天const cleanOldLogs = () => { const sevenDaysAgo = new Date(); sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
deviceLogs.value = deviceLogs.value.filter(log => { const logDate = new Date(log.timestamp); return logDate >= sevenDaysAgo; });};
// 添加新日志时自动触发清理const addDeviceLog = (log: DeviceLog) => { deviceLogs.value.unshift(log); cleanOldLogs(); // 保持内存占用稳定};2.4 响应式缓存的特性与应用
得益于 Vue3 的ref响应式系统，我们的缓存数据天生具备响应式能力，无需额外的状态同步代码：
数据自动响应式更新
当缓存数据更新时，所有使用该数据的组件会自动触发 UI 刷新，无需手动通知：
// 数据获取后自动触发UI更新const fetchDevices = async () => { try { const data = await api.get('/api/devices'); if (data.code === 200 && Array.isArray(data.data)) { devices.value = data.data; // 直接赋值，触发响应式更新 lastUpdateTime.value = new Date(); // 更新缓存时间戳 } } catch (error) { console.error('获取设备数据失败:', error); }};
// 单设备数据更新时，同样自动同步const updateDevice = (id: number, updates: Partial<Device>) => { const index = devices.value.findIndex(d => d.id === id); if (index !== -1) { const device = devices.value[index]; if (device) { Object.assign(device, updates); // 响应式更新，所有组件自动同步 } }};计算属性自动依赖追踪
我们可以基于缓存数据创建计算属性，它们会自动追踪缓存数据的变化，当缓存更新时自动重新计算：
// 基于缓存数据的统计计算属性const getDeviceStats = () => { return computed(() => { const total = devices.value.length; const online = devices.value.filter(d => d.isOnline).length; const offline = total - online; const normal = devices.value.filter(d => d.status === 'normal').length; const abnormal = total - normal;
// 当devices缓存变化时，自动重新计算 return { total, online, offline, normal, abnormal }; });};细粒度设备级缓存控制
针对不同设备的历史数据，我们实现了独立的缓存状态管理，每个设备的缓存过期时间互不影响：
// 更新特定设备的缓存时间const updateDeviceCacheTime = (deviceId: number) => { lastHistoryUpdateTime.value.set(deviceId, new Date());};
// 检查特定设备的缓存状态const isDeviceCacheValid = (deviceId: number): boolean => { const lastUpdate = lastHistoryUpdateTime.value.get(deviceId); if (!lastUpdate) return false; return new Date().getTime() - lastUpdate.getTime() <= DATA_UPDATE_INTERVAL;};2.5 业务组件中的实际使用
这套缓存策略对业务组件完全透明，组件开发者无需关心缓存的细节，只需要像调用普通接口一样调用 Store 的方法即可：
<!-- Data.vue 业务组件中使用缓存策略 --><script setup>import { onMounted, computed } from 'vue';import { useDeviceStore } from '@/stores/deviceStore';
const { devices, getOrUpdateDevices, getOrUpdateDeviceHistoryData, getDeviceAverageData} = useDeviceStore();
// 组件挂载时智能获取数据// 如果数据在5分钟内已获取过，会直接使用缓存，不会发起请求onMounted(async () => { await getOrUpdateDevices();});
// 切换设备时智能获取历史数据// 每个设备独立缓存，查看过的设备再次访问不会重复请求const onDeviceChange = async (deviceId) => { await getOrUpdateDeviceHistoryData(deviceId);};
// 计算属性自动使用缓存数据，缓存更新时自动刷新图表const chartData = computed(() => { return getDeviceAverageData(24); // 使用缓存的历史数据计算});</script>三、优化效果与性能验证
这套方案上线后，我们对系统的各项指标进行了统计，验证优化效果：
3.1 API 请求量优化效果
优化前后的请求行为对比
优化前：
-
每次切换页面都重新请求设备列表
-
每次查看设备详情都重新请求历史数据
-
每次刷新页面都重新请求所有传感器数据
优化后：
-
5 分钟内重复访问直接使用缓存数据
-
设备级缓存隔离，不同设备的缓存互不影响
-
智能判断数据新鲜度，仅在过期时才发起请求
实际数据统计
基于用户实际使用场景的统计数据，我们得到了以下优化结果：
| 场景 | 优化前请求次数 | 优化后请求次数 | 减少比例 |
|---|---|---|---|
| 页面切换 10 次 | 30 次 | 12 次 | 60% |
| 查看 5 个设备详情 | 15 次 | 6 次 | 60% |
| 30 分钟使用周期 | 45 次 | 18 次 | 60% |
验证方法
我们可以通过两种方式快速验证缓存是否生效：
-
调试日志验证：通过 Store 中的缓存命中日志，可以清晰看到哪些请求使用了缓存：
[Cache Hit] 设备 101 使用缓存的历史数据[Cache Hit] 设备 102 使用缓存的历史数据[Cache Miss] 设备 103 需要更新历史数据 -
浏览器 Network 面板验证：
-
首次加载：可以观察到完整的 API 请求序列
-
5 分钟内重复操作：不会产生新的 API 请求
-
超过 5 分钟后：再次访问会触发新的数据获取请求
-
3.2 性能指标与用户体验提升
除了请求量的减少，这套方案也带来了明显的用户体验提升：
用户体验对比
优化前：
-
页面切换有明显的加载延迟（300-500ms）
-
频繁看到 loading 状态
-
数据展示有闪烁感
优化后：
-
页面切换几乎无感知（<50ms）
-
数据即时展示，大部分场景无需 loading 状态
-
流畅的交互体验
性能指标对比
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 首屏加载时间 | 1.2s | 0.8s | 33% |
| 页面切换时间 | 300ms | 50ms | 83% |
| 内存占用 | 45MB | 38MB | 15% |
| API 请求量 / 小时 | 180 次 | 72 次 | 60% |
四、技术难点与解决方案
在实现这套缓存策略的过程中，我们也遇到了一些常见的技术难点，以下是我们的解决方案：
4.1 并发请求控制
问题：当多个组件同时挂载，并调用getOrUpdateDevices方法时，会触发多次重复的 API 请求，导致请求冗余。
解决方案：我们通过刷新状态标志和请求队列，实现了并发请求的控制，确保同一时间只有一个请求在执行：
// 刷新状态标志，防止并发请求let isRefreshing = false;// 等待刷新完成的订阅者队列let refreshSubscribers: Array<() => void> = [];
// 订阅刷新完成事件const subscribeRefresh = (callback: () => void) => { refreshSubscribers.push(callback);};
// 刷新完成后通知所有订阅者const onRefreshed = () => { refreshSubscribers.forEach(callback => callback()); refreshSubscribers = [];};4.2 Token 过期适配
问题：缓存期间用户的 Token 过期，导致后续的缓存刷新请求失败，影响用户使用。
解决方案：我们在 API 层实现了 Token 自动刷新机制，当 Token 过期时，自动刷新 Token 并重试请求：
// api.ts 中实现Token自动刷新const refreshToken = async (): Promise<string | null> => { try { const response = await fetch('/api/refresh', { method: 'POST', credentials: 'include' // 携带cookie刷新token }); const data = await response.json(); if (data.access_token) { localStorage.setItem('accessToken', data.access_token); return data.access_token; } return null; } catch (error) { return null; }};4.3 设备级缓存隔离
问题：不同设备的历史数据更新频率不同，如果使用全局缓存，会导致查看某个设备时，所有设备的缓存都被刷新，造成不必要的请求。
解决方案：我们使用Map数据结构，为每个设备维护独立的缓存时间戳，实现了细粒度的缓存隔离：
// 使用Map实现设备级缓存时间戳管理const lastHistoryUpdateTime = ref<Map<number, Date>>(new Map());
// 每个设备独立判断缓存有效性const needsUpdate = existingData.length === 0 || !lastUpdate || (new Date().getTime() - lastUpdate.getTime() > DATA_UPDATE_INTERVAL);五、总结与适用场景
5.1 核心收益
这套基于 Vue3 响应式系统的 Store 层缓存策略，为我们带来了以下收益：
-
性能提升：API 请求量减少 60%，页面切换响应速度提升 83%
-
用户体验：数据即时展示，页面切换无感知，大幅减少 loading 状态
-
资源节约：服务器负载降低，带宽消耗减少，降低了服务成本
-
代码优雅：基于 Vue 的响应式系统，无需额外的状态同步代码，简化了状态管理
5.2 适用场景
这套方案非常适合以下场景：
-
数据更新频率不高的内部管理系统
-
多页面共享数据的单页应用
-
对实时性要求不是极高的展示类应用
-
存在大量重复数据请求的中大型前端项目
如果你也在开发类似的应用，不妨尝试这套缓存策略，相信可以为你的应用带来明显的性能提升。
Vue3 响应式数据缓存实战：基于 Store 层的智能缓存策略设计与实现
https://localhost/posts/vue3-reactive-data-caching-strategy/ 部分信息可能已经过时