前端下拉数据缓存策略

前言

在 Vue 项目开发中，我们经常会遇到这样的场景：页面上有多个级联的下拉框，例如"省份"与"城市"。当用户选择不同的"省份"时，"城市"下拉框的内容需要随之改变。为了提升用户体验和减少网络请求，我们通常会采用缓存策略。然而，简单的缓存策略会带来数据一致性问题：当用户在其他页面新增或修改了数据后，返回当前页面时，下拉框中显示的仍然是旧的缓存数据。

本文将介绍一种优雅的解决方案，既能利用缓存提升性能，又能确保数据的实时性。

问题分析

缓存带来的便利

在级联下拉框场景中，缓存可以带来以下好处：

缓存带来的挑战

然而，简单的缓存策略存在以下问题：

解决方案

1. 基础缓存策略

首先，我们实现一个基础的缓存策略：

export default {
data() {
return {
// 缓存对象，key为父级ID，value为子级数据
cacheData: {}
};
},

methods: {
/**
* 获取子级数据（带缓存）
* @param {String|Number} parentId – 父级ID
* @returns {Array} 子级数据列表
*/
async getChildData(parentId) {
// 1. 检查缓存是否存在
if (this.cacheData[parentId]) {
console.log(`[Cache] 命中缓存，ID: ${parentId}`);
return this.cacheData[parentId];
}

// 2. 缓存不存在，发起请求
try {
console.log(`[API] 发起请求，参数: ${parentId}`);
const res = await this.fetchDataFromApi(parentId);

// 3. 将结果存入缓存
if (res && res.length) {
this.cacheData[parentId] = res;
}

return res || [];
} catch (error) {
console.error("获取数据失败:", error);
return [];
}
},

// 模拟API请求
fetchDataFromApi(parentId) {
// 实际项目中替换为真实的API调用
return Promise.resolve([
{ id: 1, name: `选项A-${parentId}` },
{ id: 2, name: `选项B-${parentId}` }
]);
}
}
};

优点：实现简单，能有效减少重复请求。
缺点：数据更新后，缓存不会自动失效。

2. 基于生命周期的缓存刷新策略

为了解决数据不一致问题，我们可以利用 Vue 的 activated 钩子（配合 <keep-alive> 使用），在页面重新激活时清空缓存。

export default {
data() {
return {
cacheData: {}
};
},

methods: {
async getChildData(parentId) {
if (this.cacheData[parentId]) {
return this.cacheData[parentId];
}

try {
const res = await this.fetchDataFromApi(parentId);
if (res && res.length) {
this.cacheData[parentId] = res;
}
return res || [];
} catch (error) {
console.error("获取数据失败:", error);
return [];
}
},

// 清空所有缓存
clearCache() {
this.cacheData = {};
console.log('[Cache] 缓存已清空');
},

fetchDataFromApi(parentId) {
return Promise.resolve([…]); // 模拟API
}
},

// 当组件在 <keep-alive> 内被激活时调用
activated() {
console.log('[Lifecycle] 页面激活，刷新缓存');
this.clearCache();

// 如果当前已有选中的父级ID，重新加载其子级数据
if (this.currentParentId) {
this.getChildData(this.currentParentId);
}
}
};

优点：保证了用户每次回到页面都能看到最新数据。
缺点：如果用户只是在页面内切换选项，频繁切换回来会导致缓存失效。

3. 基于时间戳的缓存过期策略（推荐）

这是一种更精细的控制方式。我们在存储数据时附带一个时间戳，读取时对比当前时间，如果超过设定阈值（如5分钟），则视为缓存过期并重新请求。

export default {
data() {
return {
// 缓存结构: { parentId: { data: […], timestamp: 1715000000000 } }
cacheData: {},
// 缓存有效期：5分钟（单位：毫秒）
cacheExpireTime: 5 * 60 * 1000
};
},

methods: {
async getChildData(parentId) {
const now = Date.now();

// 1. 检查缓存是否存在
if (this.cacheData[parentId]) {
const { data, timestamp } = this.cacheData[parentId];

// 2. 检查是否过期
if (now – timestamp < this.cacheExpireTime) {
console.log(`[Cache] 命中有效缓存，ID: ${parentId}`);
return data;
} else {
console.log(`[Cache] 缓存已过期，ID: ${parentId}`);
// 删除过期缓存
delete this.cacheData[parentId];
}
}

// 3. 发起网络请求
try {
console.log(`[API] 发起请求，参数: ${parentId}`);
const res = await this.fetchDataFromApi(parentId);

// 4. 更新缓存并附带当前时间戳
if (res && res.length) {
this.cacheData[parentId] = {
data: res,
timestamp: now
};
}

return res || [];
} catch (error) {
console.error("获取数据失败:", error);
return [];
}
},

// 手动清除特定ID的缓存（用于数据变更后的强制刷新）
clearCacheById(id) {
if (this.cacheData[id]) {
delete this.cacheData[id];
console.log(`[Cache] 已清除ID: ${id} 的缓存`);
}
}
}
};

优点：

缺点：逻辑相对复杂一点点。

实际应用建议

在实际开发中，建议采用 "策略3（时间戳过期） + 页面激活钩子" 的组合拳：

activated() {
// 页面激活时，为了保险起见，清空所有缓存
this.cacheData = {};
// 重新加载当前状态所需的数据
if (this.currentParentId) {
this.getChildData(this.currentParentId);
}
}

总结

处理级联下拉框的数据缓存，本质上是在 "性能（少请求）" 与 "一致性（数据最新）" 之间做权衡。