hookehuyr

fix: 修复内存泄漏并优化缓存管理

修复版本检查定时器未清理导致的内存泄漏问题
优化axios缓存机制,减少内存占用和过期缓存清理频率
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-06-10 13:47:08 5 + * @LastEditTime: 2025-10-01 15:41:19
6 * @FilePath: /data-table/src/App.vue 6 * @FilePath: /data-table/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 12
13 <script setup> 13 <script setup>
14 import { mainStore, useTitle } from "@/utils/generatePackage"; 14 import { mainStore, useTitle } from "@/utils/generatePackage";
15 -import { computed, watchEffect, onMounted } from "vue"; 15 +import { computed, watchEffect, onMounted, onUnmounted } from "vue";
16 import { useRoute, useRouter } from "vue-router"; 16 import { useRoute, useRouter } from "vue-router";
17 // import { Toast } from "vant"; 17 // import { Toast } from "vant";
18 // 会根据配置判断是否显示调试控件 18 // 会根据配置判断是否显示调试控件
...@@ -242,8 +242,9 @@ onMounted(async () => { ...@@ -242,8 +242,9 @@ onMounted(async () => {
242 } 242 }
243 243
244 // TAG:检查是否更新 244 // TAG:检查是否更新
245 + let upDater = null;
245 if (import.meta.env.PROD) { 246 if (import.meta.env.PROD) {
246 - const upDater = new Updater({ 247 + upDater = new Updater({
247 time: 30000 248 time: 30000
248 }) 249 })
249 upDater.on('no-update', () => { 250 upDater.on('no-update', () => {
...@@ -259,6 +260,13 @@ onMounted(async () => { ...@@ -259,6 +260,13 @@ onMounted(async () => {
259 }); 260 });
260 }) 261 })
261 } 262 }
263 +
264 + // 组件卸载时清理定时器
265 + onUnmounted(() => {
266 + if (upDater) {
267 + upDater.destroy();
268 + }
269 + });
262 }); 270 });
263 </script> 271 </script>
264 272
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-28 10:17:40 3 * @Date: 2022-05-28 10:17:40
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2024-11-25 15:56:19 5 + * @LastEditTime: 2025-09-30 22:25:22
6 * @FilePath: /data-table/src/utils/axios.js 6 * @FilePath: /data-table/src/utils/axios.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -27,7 +27,7 @@ const onlyDataCache = { ...@@ -27,7 +27,7 @@ const onlyDataCache = {
27 const { method, url, params, data } = config; 27 const { method, url, params, data } = config;
28 var key = [method, url].join("&"); 28 var key = [method, url].join("&");
29 if (fullPath) { 29 if (fullPath) {
30 - key = [method, url, stringify(params), stringify(data)].join("&"); 30 + key = [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");
31 } 31 }
32 return key; 32 return key;
33 }, 33 },
...@@ -70,9 +70,9 @@ const keepDataCache = { ...@@ -70,9 +70,9 @@ const keepDataCache = {
70 // 缓存列表 70 // 缓存列表
71 list: [], 71 list: [],
72 // 最大缓存数 72 // 最大缓存数
73 - MAX_NUM: 100, 73 + MAX_NUM: 50, // 从100减少到50,减少内存占用
74 // 最大缓存时间 74 // 最大缓存时间
75 - EXPIRED_TIME: 60000, 75 + EXPIRED_TIME: 30000, // 从60秒减少到30秒,更频繁地清理过期缓存
76 // 根据请求的信息(请求方式,url,请求get/post数据),产生map的key 76 // 根据请求的信息(请求方式,url,请求get/post数据),产生map的key
77 getRequestKey(config) { 77 getRequestKey(config) {
78 const { method, url, params, data } = config; 78 const { method, url, params, data } = config;
...@@ -91,10 +91,14 @@ const keepDataCache = { ...@@ -91,10 +91,14 @@ const keepDataCache = {
91 if (index > -1) { 91 if (index > -1) {
92 // 保存请求结果 92 // 保存请求结果
93 this.list[index].data = data; 93 this.list[index].data = data;
94 + this.list[index].time = Date.now(); // 更新时间戳
94 } else { 95 } else {
95 // 添加到缓存列表中 96 // 添加到缓存列表中
96 this.list.push({ time: Date.now(), key, data }); 97 this.list.push({ time: Date.now(), key, data });
97 } 98 }
99 +
100 + // 主动清理过期缓存
101 + this.cleanExpiredCache();
98 }, 102 },
99 // 查找缓存结果 103 // 查找缓存结果
100 find(config) { 104 find(config) {
...@@ -115,11 +119,21 @@ const keepDataCache = { ...@@ -115,11 +119,21 @@ const keepDataCache = {
115 } 119 }
116 } 120 }
117 // 判断是否超出了最大缓存数量 121 // 判断是否超出了最大缓存数量
118 - if (this.list.length === this.MAX_NUM) { 122 + if (this.list.length >= this.MAX_NUM) {
123 + // 移除最旧的缓存项
119 this.list.shift(); 124 this.list.shift();
120 } 125 }
121 // 返回undefined,让请求拦截不执行config.adapter 126 // 返回undefined,让请求拦截不执行config.adapter
122 return undefined; 127 return undefined;
128 + },
129 + // 清理过期缓存的方法
130 + cleanExpiredCache() {
131 + const now = Date.now();
132 + this.list = this.list.filter(item => now - item.time <= this.EXPIRED_TIME);
133 + },
134 + // 清空所有缓存
135 + clear() {
136 + this.list = [];
123 } 137 }
124 }; 138 };
125 139
......
1 /* 1 /*
2 * @Date: 2024-02-06 11:38:13 2 * @Date: 2024-02-06 11:38:13
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-02-06 13:04:25 4 + * @LastEditTime: 2025-09-30 22:33:40
5 - * @FilePath: /xysBooking/src/utils/versionUpdater.js 5 + * @FilePath: /data-table/src/utils/versionUpdater.js
6 * @Description: 6 * @Description:
7 */ 7 */
8 /* eslint-disable */ 8 /* eslint-disable */
...@@ -61,10 +61,20 @@ export class Updater { ...@@ -61,10 +61,20 @@ export class Updater {
61 61
62 timing(time = 10000) { 62 timing(time = 10000) {
63 //轮询 63 //轮询
64 - setInterval(async () => { 64 + this.intervalId = setInterval(async () => {
65 const newHtml = await this.getHtml(); 65 const newHtml = await this.getHtml();
66 this.newScript = this.parserScript(newHtml); 66 this.newScript = this.parserScript(newHtml);
67 this.compare(this.oldScript, this.newScript); 67 this.compare(this.oldScript, this.newScript);
68 }, time); 68 }, time);
69 } 69 }
70 +
71 + /**
72 + * 清理定时器
73 + */
74 + destroy() {
75 + if (this.intervalId) {
76 + clearInterval(this.intervalId);
77 + this.intervalId = null;
78 + }
79 + }
70 } 80 }
......