Map 缓存和拿取

为什么 Map 能实现缓存？

缓存的核心是「键值对存储 + 快速读取」，Map 天生就是为这种场景设计的，相比普通对象，它更适合做缓存：

1. Map 的本质：是 ES6 新增的键值对集合，类似 “字典”，可以用任意类型（字符串、数字、对象等）作为键（key），对应存储一个值（value）。

2.存储逻辑（set 方法）：

chartConfigCache.set(chartId, { content:"内容", height:"高度", url:"路径" })

把 chartId 作为唯一标识（键），确保每个缓存数据不冲突；

把相关的配置、高度等数据打包成对象作为值，绑定到这个键上，存入 Map 容器中。

3.读取逻辑（get 方法）：

chartConfigCache.get(chartId)

根据传入的 chartId（本质也是某个图表的唯一标识），从 Map 中查找对应的 “值”；
如果找到，就返回之前存储的图表数据对象；如果没找到，返回 undefined（所以代码中需要先 “检查缓存” ）

// 1. 创建一个全局/模块级的 Map 实例，作为缓存容器 const chartConfigCache = new Map(); // 2. 第二步：将接口返回的图表数据存入缓存（通常是接口请求成功后执行） chartConfigCache.set(chartId, { content: res.result.output, // 图表配置内容 height: res.result.height, // 图表高度 url: res.result.url // 图表相关链接 }); // 3. 第三步：后续使用时，从缓存中读取指定 chartId的缓存数据 const cachedData = chartConfigCache.get(chartId);

在 Vue 中的使用场景补充

这段代码在 Vue 中通常会这样用（完整示例），帮你理解缓存的实际价值：

<template> <div :style="{ height: chartHeight + 'px' }">{{ chartContent }}</div> </template> <script> // 注意：如果想让缓存跨组件/页面生效，要把 Map 定义在组件外部（模块级） const chartConfigCache = new Map(); export default { data() { return { chartId: 'chart_123', chartContent: '', chartHeight: 0 }; }, async mounted() { // 第一步：先查缓存，有缓存就直接用，不用请求接口 const cachedData = chartConfigCache.get(this.chartId); if (cachedData) { this.chartContent = cachedData.content; this.chartHeight = cachedData.height; return; // 直接返回，跳过接口请求 } // 第二步：没有缓存，才请求接口获取数据 try { const res = await this.$http.get('/api/getChartConfig', { params: { chartId: this.chartId } }); // 接口返回数据后，存入缓存 chartConfigCache.set(this.chartId, { content: res.result.output, height: res.result.height, url: res.result.url }); // 渲染数据 this.chartContent = res.result.output; this.chartHeight = res.result.height; } catch (err) { console.error('请求图表数据失败：', err); } } }; </script>

总结

1. 缓存的核心原理：利用 Map 的 set(key, value) 存储键值对、get(key) 读取对应值的特性，将图表唯一标识（chartId）作为键，图表数据作为值，实现 “一次存储、多次读取”。
2. 缓存的价值：避免重复请求接口 / 重复计算图表数据，减少网络请求和性能消耗，提升 Vue 页面的渲染速度。
3. 关键注意点：Map 是内存级缓存，页面刷新 / 浏览器关闭后会清空；如果需要持久化缓存，要结合 localStorage/sessionStorage，但图表配置通常用内存缓存就足够。