Vue 缓存Hook:提高接口性能,减少重复请求

 前言

在开发 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 setup>import { useCache } from './useCache';import { onMounted, ref } from 'vue';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) {// 如果缓存中存在,直接赋值给 userInfouserInfo.value = cachedUserInfo;} else {// 如果缓存中不存在,调用接口获取用户信息const response = await fetch('/api/userInfo');const data = await response.json();// 将用户信息存入缓存中,设置缓存时间为 10 分钟setDataToCache('userInfo', data, 10 * 60 * 1000);// 将用户信息赋值给 userInfouserInfo.value = data;}} catch (err) {error.value = true;} finally {loading.value = false;}}onMounted(fetchUserInfo);
</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);}// 如果缓存不存在或已过期,返回nullreturn 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);}// 如果缓存不存在或已过期,返回nullreturn 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);}// 如果缓存不存在或已过期,返回nullreturn null;}function clearAllCache() {// 清空缓存中的所有数据cache.clear();// 取消所有的定时器cache.forEach((value) => {clearTimeout(value.timer);});// 清空键数组keys.length = 0;}// 返回设置数据和获取数据的方法return { setDataToCache, getDataFromCache, clearAllCache };
}

以上便是一些可优化的点,除此之外,你还可以从持久化、性能监控、并发控制 、缓存策略等方面优化。

结语 

在本篇文章中,我们探讨了Vue缓存Hook的使用,这是一个基于Vue响应式系统的缓存工具,旨在帮助我们在组件之间轻松地共享和管理缓存数据。通过使用这个缓存Hook,我们能够有效地提高应用性能,减少不必要的接口调用,从而提升用户体验。希望这篇文章能够帮到大家,特别是在开发Vue应用时需要考虑性能优化和缓存管理的朋友们。如果你有任何问题或疑问,欢迎随时提问,我会尽力帮助解答。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派Debian系统中如何用mDNS广播自己的ip地址

在 Debian 系统的树莓派上使用 mDNS&#xff08;Multicast DNS&#xff09;广播其 IP 地址通常涉及到 Avahi 服务的使用。Avahi 是 Linux 系统中的一个零配置网络&#xff08;Zeroconf&#xff09;实现&#xff0c;它允许设备在没有配置DNS服务器的情况下通过网络发现服务和主机…

中国电子学会2022年09月份青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)

一、单选题(共25题&#xff0c;共50分) 角色初始位置如图所示&#xff0c;下面哪个选项能让角色移到舞台的左下角?( ) A. B. C. D. 2点击绿旗&#xff0c;执行下面程序&#xff0c;关于小鱼的运动描述正确 A.小鱼不会动 B.小鱼一会儿向上游&#xff0c;一会儿向下游。 C按下…

【代码随想录】刷题笔记Day49

前言 跑了个步吃了个饭洗了个澡以及和母上打了个电话&#xff0c;继续来刷题咯o(*&#xffe3;▽&#xffe3;*)ブ 122. 买卖股票的最佳时机 II - 力扣&#xff08;LeetCode&#xff09; 贪心法 之前写过的&#xff0c;代码直接看【代码随想录】刷题笔记Day35-CSDN博客 动规法…

自动化的运维管理:探究Kubernetes工作机制的奥秘

1 云计算时代的操作系统 Kubernetes 是一个生产级别的 容器编排平台 和 集群管理系统 &#xff0c;能够 创建、调度容器&#xff0c;监控、管理服务器。 容器是什么&#xff1f;容器是软件&#xff0c;是应用&#xff0c;是进程。服务器是什么&#xff1f;服务器是硬件&#…

华硕飞行堡垒FX53VD键盘全部失灵【除电源键】

华硕飞行堡垒FX53VD键盘全部失灵【除电源键】 前言一、故障排查二、发现问题三、使用方法总结 前言 版本型号&#xff1a; 型号 ASUS FX53VD&#xff08;华硕-飞行堡垒&#xff09; 板号&#xff1a;GL553VD 故障情况描述&#xff1a; 键盘无法使用&#xff0c;键盘除开机键外…

详解 ThreadPoolExecutor 的参数含义及源码执行流程?

Java 学习面试指南&#xff1a;https://javaxiaobear.cn 线程池是为了避免线程频繁的创建和销毁带来的性能消耗&#xff0c;而建立的一种池化技术&#xff0c;它是把已创建的线程放入“池”中&#xff0c;当有任务来临时就可以重用已有的线程&#xff0c;无需等待创建的过程&a…

开源C语言库Melon:多线程治理

问题描述 不知你是否有过类似如下的需求&#xff1a; 有一些功能&#xff0c;它们足够单一&#xff0c;但又需要后台持续运行&#xff0c;以容器实现感觉太重了&#xff0c;以进程实现又太琐碎了&#xff0c;以线程实现可以接受但是又不好管理。 这类程序诸如&#xff1a;数据…

详解c++移动构造函数和移动赋值运算符在代码性能中起的作用

对象移动 对象移动&#xff0c;就是把一个不想用了的对象A中的一些有用的数据提取出来&#xff0c;在构建新对象B的时候就不需要重新构建对象中的所有数据——从不想用了的对象A中提取出来的有用数据在构建对象B时都可以拿来使用。 我们知道&#xff0c;拷贝构造函数、拷贝赋…

14 .docker部署若依

文章目录 0.参考资料1. 创建网络2.制作java容器3.容器启动 0.参考资料 https://blog.csdn.net/Pan_peter/article/details/128807946 1. 创建网络 因为java容器的运行需要访问mysql和redis容器&#xff0c;nginx容器需要访问java容器&#xff0c;所以需要创建一个他们能互相…

Java中什么是多线程?

Java是一种支持多线程编程的编程语言&#xff0c;它提供了内置的多线程支持&#xff0c;使得开发者能够创建并发执行的程序。多线程是一种在同一程序中同时执行多个线程的机制&#xff0c;每个线程都是独立运行的&#xff0c;并且可以共享相同的资源。在Java中&#xff0c;多线…

设计模式之观察者模式【行为型模式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某…

把图表题注编号由“0.1”改为“1.1“ (方法二)

前置设置&#xff1a; 手打章节标题&#xff0c;“第一章 绪论”&#xff0c;“第二章 相关理论和技术方法”。给章节标题设置样式 “标题一”&#xff0c;设置为一级标题。打开导航窗格&#xff0c;可以不开&#xff0c;我纯粹是为了操作方便。直接先给图片插入题注&#xff…

cpolar 内网穿透 使用

cpolar 内网穿透 使用 官网地址&#xff1a;https://www.cpolar.com/ 官网文档&#xff1a;https://www.cpolar.com/blog/cpolar-quick-start-tutorial-centos-series 获取隧道Authtoken&#xff1a;https://dashboard.cpolar.com/auth 步骤 1、先去注册 在这个地方注册&…

开发规范及常用工具

一、定义对象规范 entity : 是与数据库一一对应的字段 vo : 返回给前端的视图对象 dto : 前端传过来的参数封装成dto,用于返回给前端的对象&#xff0c;一般用于查询操作。 POJO是DO/DTO/BO/VO的统称&#xff0c;禁止命名成xxxPOJO。 1、entity实体类与数据库中的字段一一对应…

重磅2023年度openGauss标杆应用实践案例正式揭晓

12月28日&#xff0c;在openGauss Summit 2023峰会上&#xff0c;正式揭晓了“2023年度openGauss标杆应用实践案例”。 数据库作为企业IT系统的核心组成部分&#xff0c;是数字基础设施建设的关键&#xff0c;也是实现数据安全稳定的保障。为更好地推动产业技术创新&#xff0…

使用Linux防火墙管理HTTP流量

在Linux系统中&#xff0c;防火墙是用于控制网络流量的重要工具。通过防火墙&#xff0c;你可以根据需要限制、过滤或允许特定的网络流量&#xff0c;从而提高系统的安全性。在处理HTTP流量时&#xff0c;防火墙可以帮助你实施访问控制、流量监控和其他安全策略。 iptables i…

PPT插件-大珩助手-免费功能-特殊格式介绍

上、下标切换 直接切换选中的字符为上、下标。 大小金额 支持超大金额的大写金额转换 当前日期 本次打开文件的时间 转二维码 将当前选中的文字&#xff0c;转为二维码图片&#xff0c;并插入到PPT当前位置 特殊字符 内置常用的特殊字符&#xff0c;点击使用 软件介绍 …

美易官方:美银预计今年日本股市将上涨13%,创历史新高

根据美银的预测&#xff0c;今年日本股市将上涨13%&#xff0c;创历史新高。这一预测是基于多种因素的综合分析得出的&#xff0c;其中包括日本经济的复苏、企业盈利的改善以及全球经济的稳定等。 首先&#xff0c;日本经济的复苏是推动股市上涨的重要因素之一。近年来&#xf…

Java多线程并发篇----第五篇

系列文章目录 文章目录 系列文章目录前言一、Java中interrupted 和 isInterruptedd方法的区别?二、Java中synchronized 和 ReentrantLock 有什么不同?三、有三个线程T1,T2,T3,如何保证顺序执行?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分…

关于CodeReview的一些实践和思考

在日常开发中&#xff0c;Code Review 的重要性日益凸显。它不仅有助于提升代码质量&#xff0c;还促进了团队成员之间的知识共享和技能提升。本文将主要聚焦于 Code Review&#xff0c;分享在这个过程中的一些心得和思考。 CodeReview常用到的一些术语 之前看到公司的大佬经…