背景问题：
需要有效的缓存策略来提升性能。
方案思考：
实现多层次的缓存策略。
具体实现：
缓存管理器：
// utils/cache-manager.js// 缓存管理器exportclassCacheManager{constructor(options={}){this.storage=options.storage||localStoragethis.maxSize=options.maxSize||100// 最大缓存数量this.defaultExpireTime=options.defaultExpireTime||30*60*1000// 默认30分钟过期this.cache=newMap()}// 设置缓存set(key,value,expireTime=this.defaultExpireTime){constitem={value,timestamp:Date.now(),expireTime}// 检查缓存大小，如果超过限制则清理最旧的项if(this.cache.size>=this.maxSize){constoldestKey=this.cache.keys().next().valuethis.cache.delete(oldestKey)}this.cache.set(key,item)// 同时存储到本地存储try{this.storage.setItem(`cache_${key}`,JSON.stringify(item))}catch(e){console.warn('缓存存储失败:',e)}}// 获取缓存get(key){// 先从内存缓存获取letitem=this.cache.get(key)// 如果内存中没有，尝试从本地存储获取if(!item){try{conststored=this.storage.getItem(`cache_${key}`)if(stored){item=JSON.parse(stored)// 验证是否过期if(this.isExpired(item)){this.remove(key)returnnull}// 重新加入内存缓存this.cache.set(key,item)}}catch(e){console.warn('缓存读取失败:',e)returnnull}}// 检查是否过期if(item&&this.isExpired(item)){this.remove(key)returnnull}returnitem?item.value:null}// 检查是否过期isExpired(item){returnDate.now()-item.timestamp>item.expireTime}// 移除缓存remove(key){this.cache.delete(key)this.storage.removeItem(`cache_${key}`)}// 清空所有缓存clear(){this.cache.clear()// 清除所有以 cache_ 开头的存储项for(leti=0;i<this.storage.length;i++){constkey=this.storage.key(i)if(key&&key.startsWith('cache_')){this.storage.removeItem(key)i--// 修正索引}}}// 获取缓存统计信息getStats(){constvalidItems=[]constexpiredItems=[]for(const[key,item]ofthis.cache){if(this.isExpired(item)){expiredItems.push(key)}else{validItems.push(key)}}return{total:this.cache.size,valid:validItems.length,expired:expiredItems.length,keys:validItems}}// 清理过期缓存cleanup(){for(const[key,item]ofthis.cache){if(this.isExpired(item)){this.remove(key)}}}}// 创建全局缓存实例exportconstcacheManager=newCacheManager()响应式缓存组合函数：
// composables/useCachedData.jsimport{ref,computed,onMounted}from'vue'import{cacheManager}from'@/utils/cache-manager'exportfunctionuseCachedData(cacheKey,fetchDataFn,options={}){const{expireTime=30*60*1000,// 30分钟immediate=true,enableCache=true}=optionsconstdata=ref(null)constloading=ref(false)consterror=ref(null)// 从缓存获取数据constloadData=async()=>{if(enableCache){// 尝试从缓存获取constcachedData=cacheManager.get(cacheKey)if(cachedData){data.value=cachedDatareturn}}loading.value=trueerror.value=nulltry{constresult=awaitfetchDataFn()data.value=result// 存入缓存if(enableCache){cacheManager.set(cacheKey,result,expireTime)}}catch(err){error.value=err console.error('数据加载失败:',err)}finally{loading.value=false}}// 刷新数据（不使用缓存）constrefresh=async()=>{// 先清除缓存cacheManager.remove(cacheKey)awaitloadData()}// 更新缓存constupdateCache=(newData)=>{data.value=newDataif(enableCache){cacheManager.set(cacheKey,newData,expireTime)}}// 删除缓存constinvalidateCache=()=>{cacheManager.remove(cacheKey)}if(immediate){onMounted(loadData)}return{data:computed(()=>data.value),loading:computed(()=>loading.value),error:computed(()=>error.value),loadData,refresh,updateCache,invalidateCache}}内存泄漏检测：
// utils/memory-monitor.js// 内存监控工具exportclassMemoryMonitor{constructor(){this.observer=nullthis.observedElements=newWeakMap()}// 监控DOM元素泄漏observeElement(element,owner){if(!this.observedElements.has(element)){this.observedElements.set(element,owner)}}// 检测内存泄漏detectLeaks(){if(typeofwindow!=='undefined'&&window.performance&&window.performance.memory){constmemory=window.performance.memoryreturn{used:memory.usedJSHeapSize,total:memory.totalJSHeapSize,limit:memory.jsHeapSizeLimit,usage:(memory.usedJSHeapSize/memory.totalJSHeapSize*100).toFixed(2)+'%'}}returnnull}// 清理未使用的引用cleanup(){// 在开发环境中打印潜在的内存泄漏if(process.env.NODE_ENV==='development'){console.log('执行内存清理...')}}// 监控组件实例monitorComponent(componentInstance,name){// 记录组件实例以便后续检查if(!this.componentInstances){this.componentInstances=newWeakSet()}this.componentInstances.add(componentInstance)}}exportconstmemoryMonitor=newMemoryMonitor()
