在开发 Web 应用时，我们经常会遇到需要重复调用接口的场景。例如，当用户频繁刷新页面或进行某个操作时，我们可能需要多次请求相同的数据。这不仅会增加服务器负担，还会导致用户体验下降。为此，我们可以使用缓存机制来优化这一问题。本文将教你一步一步实现一个功能较完善的Vue缓存Hook（钩子函数），它可以帮助我们减少接口的重复调用，提高应用性能。
这个Hook是一个基于Vue响应式系统的缓存工具，它可以帮助我们轻松地在组件之间共享和管理缓存数据。通过使用缓存，我们可以将接口调用结果缓存起来，当再次需要相同数据时，可以直接从缓存中获取，避免重复调用接口。
以下是一个简单的示例：
import { reactive } from 'vue';
// 缓存值的接口定义
interface CacheValue {
data: any; // 存储的数据
expireAt: number; // 数据的过期时间戳
}
// 使用缓存的功能函数
export function useCache() {
// 创建一个响应式的Map对象来存储缓存
const cache = reactive<Map<string, CacheValue>>(new Map());
/**
* @param {string} key - 数据的键
* @param {any} data - 要存储的数据
* @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
*/
function setDataToCache(key: string, data: any, cacheTime: number) {
const expireAt = Date.now() + cacheTime; // 计算过期时间戳
cache.set(key, { data, expireAt }); // 存储数据和过期时间
}
/**
*getDataFromCache函数：尝试从缓存中获取数据
*@param {string} key - 数据的键
*@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
*/
function getDataFromCache(key) {
const cachedData = cache.get(key);
if (cachedData) {
const { data, expireAt } = cachedData as CacheValue;
if (Date.now() < expireAt) {
return data; // 如果未过期，返回数据
}
cache.delete(key); // 如果已过期，清除缓存项
}
return null; // 如果不存在或已过期，返回null
}
// clearExpiredCache函数：清除过期的缓存
function clearExpiredCache() {
const now = Date.now(); // 获取当前时间
cache.forEach((value, key) => {
if (value && value.expireAt && value.expireAt < now) {
cache.delete(key); // 如果过期，删除缓存项
}
});
}
// 设置一个定时器，每60秒执行一次清除过期的缓存
setInterval(clearExpiredCache, 60000);
// 返回设置数据和获取数据的方法
return { setDataToCache, getDataFromCache };
}
这个Hook使用了 Vue 的响应式系统，将一个 Map 对象作为缓存的容器，然后提供了两个方法：setDataToCache 和 getDataFromCache，分别用于设置和获取缓存数据。它还使用了 setInterval 函数来定期清除已过期的缓存项。
我们可以在任何需要缓存数据的组件中，使用这个Hook，例如：
<template>
<div>
<h1>用户信息</h1>
<p v-if="loading">加载中...</p>
<p v-else-if="error">加载失败</p>
<p v-else>{{ userInfo }}</p>
</div>
</template>
<script>
import { useCache } from './useCache';
import { onMounted, ref } from 'vue';
export default {
setup() {
const { setDataToCache, getDataFromCache } = useCache();
const userInfo = ref(null);
const loading = ref(false);
const error = ref(false);
async function fetchUserInfo() {
loading.value = true;
error.value = false;
try {
// 从缓存中获取用户信息
const cachedUserInfo = getDataFromCache('userInfo');
if (cachedUserInfo) {
// 如果缓存中存在，直接赋值给 userInfo
userInfo.value = cachedUserInfo;
} else {
// 如果缓存中不存在，调用接口获取用户信息
const response = await fetch('/api/userInfo');
const data = await response.json();
// 将用户信息存入缓存中，设置缓存时间为 10 分钟
setDataToCache('userInfo', data, 10 * 60 * 1000);
// 将用户信息赋值给 userInfo
userInfo.value = data;
}
} catch (err) {
error.value = true;
} finally {
loading.value = false;
}
}
onMounted(fetchUserInfo);
return { userInfo, loading, error };
},
};
</script>
这样，我们就可以在组件中使用Hook来提高接口的性能，同时保证数据的及时更新。
当然，这个Hook还有很多可以优化和扩展的地方，比如：
当前的实现中没有错误处理逻辑。在实际应用中，可能需要添加对异常情况的处理，比如缓存服务不可用时的回退策略。
优化后的代码如下：
import { reactive } from 'vue';
// 缓存值的接口定义
interface CacheValue {
data: any; // 存储的数据
expireAt: number; // 数据的过期时间戳
}
// 使用缓存的功能函数
export function useCache() {
// 创建一个响应式的Map对象来存储缓存
const cache = reactive<Map<string, CacheValue>>(new Map());
/**
* @param {string} key - 数据的键
* @param {any} data - 要存储的数据
* @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
*/
function setDataToCache(key: string, data: any, cacheTime: number) {
try {
// 错误处理：确保所有参数都不为空
if (!key || !data || !cacheTime) {
throw new Error('参数不能为空');
}
// 错误处理：确保cacheTime是一个有效的正数字
if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
throw new Error('缓存时间必须是一个正数字');
}
// 计算过期时间戳
const expireAt = Date.now() + cacheTime;
// 将数据和过期时间存储到缓存中
cache.set(key, { data, expireAt });
} catch (error) {
// 在控制台输出错误信息，方便调试
console.error('在设置缓存时发生错误：', error);
// 可以根据需要向用户发出警告或执行其他错误处理逻辑
}
}
/**
*getDataFromCache函数：尝试从缓存中获取数据
*@param {string} key - 数据的键
*@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
*/
function getDataFromCache(key) {
try {
// 如果缓存中存在这个键
if (cache.get(key)) {
// 获取键对应的缓存对象
const { data, expireAt } = cache.get(key) as CacheValue;
// 如果当前时间还没有超过过期时间
if (Date.now() < expireAt) {
// 返回缓存的数据
return data;
}
cache.delete(key); // 清除过期的缓存项
}
} catch (error) {
console.error('在获取缓存数据时发生错误：', error);
}
// 如果缓存不存在或已过期，返回null
return null;
}
// clearExpiredCache函数：清除过期的缓存
function clearExpiredCache() {
const now = Date.now(); // 获取当前时间
cache.forEach((value, key) => {
if (value && value.expireAt && value.expireAt < now) {
cache.delete(key); // 如果过期，删除缓存项
}
});
}
// 设置一个定时器，每60秒执行一次清除过期的缓存
setInterval(clearExpiredCache, 60000);
// 返回设置数据和获取数据的方法
return { setDataToCache, getDataFromCache };
}
无论缓存是否被使用，都会定期执行清除操作，这可能会造成一些不必要的性能损耗。另外，它也没有考虑到缓存的容量问题，如果缓存中存储了过多的数据，可能会占用过多的内存空间。
考虑这些方面我们的解决方案是使用 setTimeout 函数来为每个缓存项设置一个单独的定时器，当缓存过期时自动清除，避免不必要的性能损耗。同时，可以使用 LRU（最近最少使用）算法来管理缓存的容量，当缓存达到一定的大小时，自动删除最久未使用的缓存项，避免缓存占用过多的空间。优化后的代码如下：
import { reactive } from 'vue';
// 缓存值的接口定义
interface CacheValue {
data: any; // 存储的数据
expireAt: number; // 数据的过期时间戳
timer?: any;
}
// 使用缓存的功能函数
export function useCache() {
// 创建一个响应式的Map对象来存储缓存
const cache = reactive<Map<string, CacheValue>>(new Map());
// 设置缓存的最大容量
const max = 10;
// 使用一个数组来存储缓存的键，按照最近使用的顺序排序
const keys = [];
/**
* @param {string} key - 数据的键
* @param {any} data - 要存储的数据
* @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
*/
function setDataToCache(key: string, data: any, cacheTime: number) {
try {
// 错误处理：确保所有参数都不为空
if (!key || !data || !cacheTime) {
throw new Error('参数不能为空');
}
// 错误处理：确保cacheTime是一个有效的正数字
if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
throw new Error('缓存时间必须是一个正数字');
}
// 计算过期时间戳
const expireAt = Date.now() + cacheTime;
// 将数据和过期时间存储到缓存中
cache.set(key, { data, expireAt });
// 为每个缓存项设置一个定时器，当缓存过期时自动清除
const timer = setTimeout(() => {
cache.delete(key);
// 从键数组中移除该键
keys.splice(keys.indexOf(key), 1);
}, cacheTime);
// 将定时器的引用也存储到缓存中，方便取消
cache.get(key)!.timer = timer;
// 将键添加到键数组的开头
keys.unshift(key);
// 如果缓存的数量超过了最大容量
if (keys.length > max) {
// 获取最久未使用的键
const lastKey = keys.pop()!;
// 清除该键对应的缓存项和定时器
clearTimeout(cache.get(lastKey)!.timer);
cache.delete(lastKey);
}
} catch (error) {
// 在控制台输出错误信息，方便调试
console.error('在设置缓存时发生错误：', error);
// 可以根据需要向用户发出警告或执行其他错误处理逻辑
}
}
/**
*getDataFromCache函数：尝试从缓存中获取数据
*@param {string} key - 数据的键
*@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
*/
function getDataFromCache(key) {
try {
// 如果缓存中存在这个键
if (cache.get(key)) {
// 获取键对应的缓存对象
const { data, expireAt } = cache.get(key) as CacheValue;
// 如果当前时间还没有超过过期时间
if (Date.now() < expireAt) {
// 返回缓存的数据
return data;
}
// 如果缓存已过期，清除缓存项和定时器
cache.delete(key);
clearTimeout(cache.get(key)!.timer);
// 从键数组中移除该键
keys.splice(keys.indexOf(key), 1);
}
} catch (error) {
console.error('在获取缓存数据时发生错误：', error);
}
// 如果缓存不存在或已过期，返回null
return null;
}
// 返回设置数据和获取数据的方法
return { setDataToCache, getDataFromCache };
}
除此之外，还缺少一个清空所有缓存的功能：
function clearAllCache() {
// 清空缓存中的所有数据
cache.clear();
// 取消所有的定时器
cache.forEach((value) => {
clearTimeout(value.timer);
});
// 清空键数组
keys.length = 0;
}
import { reactive } from 'vue';
// 缓存值的接口定义
interface CacheValue {
data: any; // 存储的数据
expireAt: number; // 数据的过期时间戳
timer?: any;
}
// 使用缓存的功能函数
export function useCache() {
// 创建一个响应式的Map对象来存储缓存
const cache = reactive<Map<string, CacheValue>>(new Map());
// 设置缓存的最大容量
const max = 10;
// 使用一个数组来存储缓存的键，按照最近使用的顺序排序
const keys = [];
/**
* @param {string} key - 数据的键
* @param {any} data - 要存储的数据
* @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
*/
function setDataToCache(key: string, data: any, cacheTime: number) {
try {
// 错误处理：确保所有参数都不为空
if (!key || !data || !cacheTime) {
throw new Error('参数不能为空');
}
// 错误处理：确保cacheTime是一个有效的正数字
if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
throw new Error('缓存时间必须是一个正数字');
}
// 计算过期时间戳
const expireAt = Date.now() + cacheTime;
// 将数据和过期时间存储到缓存中
cache.set(key, { data, expireAt });
// 为每个缓存项设置一个定时器，当缓存过期时自动清除
const timer = setTimeout(() => {
cache.delete(key);
// 从键数组中移除该键
keys.splice(keys.indexOf(key), 1);
}, cacheTime);
// 将定时器的引用也存储到缓存中，方便取消
cache.get(key)!.timer = timer;
// 将键添加到键数组的开头
keys.unshift(key);
// 如果缓存的数量超过了最大容量
if (keys.length > max) {
// 获取最久未使用的键
const lastKey = keys.pop()!;
// 清除该键对应的缓存项和定时器
clearTimeout(cache.get(lastKey)!.timer);
cache.delete(lastKey);
}
} catch (error) {
// 在控制台输出错误信息，方便调试
console.error('在设置缓存时发生错误：', error);
// 可以根据需要向用户发出警告或执行其他错误处理逻辑
}
}
/**
*getDataFromCache函数：尝试从缓存中获取数据
*@param {string} key - 数据的键
*@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
*/
function getDataFromCache(key) {
try {
// 如果缓存中存在这个键
if (cache.get(key)) {
// 获取键对应的缓存对象
const { data, expireAt } = cache.get(key) as CacheValue;
// 如果当前时间还没有超过过期时间
if (Date.now() < expireAt) {
// 返回缓存的数据
return data;
}
// 如果缓存已过期，清除缓存项和定时器
cache.delete(key);
clearTimeout(cache.get(key)!.timer);
// 从键数组中移除该键
keys.splice(keys.indexOf(key), 1);
}
} catch (error) {
console.error('在获取缓存数据时发生错误：', error);
}
// 如果缓存不存在或已过期，返回null
return null;
}
function clearAllCache() {
// 清空缓存中的所有数据
cache.clear();
// 取消所有的定时器
cache.forEach((value) => {
clearTimeout(value.timer);
});
// 清空键数组
keys.length = 0;
}
// 返回设置数据和获取数据的方法
return { setDataToCache, getDataFromCache, clearAllCache };
}
以上便是一些可优化的点，除此之外，你还可以从持久化、性能监控、并发控制?、缓存策略等方面优化。
在本篇文章中，我们探讨了Vue缓存Hook的使用，这是一个基于Vue响应式系统的缓存工具，旨在帮助我们在组件之间轻松地共享和管理缓存数据。通过使用这个缓存Hook，我们能够有效地提高应用性能，减少不必要的接口调用，从而提升用户体验。希望这篇文章能够帮到大家，特别是在开发Vue应用时需要考虑性能优化和缓存管理的朋友们。如果你有任何问题或疑问，欢迎随时提问，我会尽力帮助解答。