Map 缓存和拿取

为什么 Map 能实现缓存？

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

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

存储逻辑（set 方法）：
javascript 复制代码
chartConfigCache.set(chartId, {
   content:"内容", 
   height:"高度", 
   url:"路径"
})
把 chartId 作为唯一标识（键），确保每个缓存数据不冲突；

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

读取逻辑（get 方法）：
javascript 复制代码
chartConfigCache.get(chartId)
根据传入的 chartId（本质也是某个图表的唯一标识），从 Map 中查找对应的 "值"；

如果找到，就返回之前存储的图表数据对象；如果没找到，返回 undefined（所以代码中需要先 "检查缓存" ）

javascript 复制代码

// 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 中通常会这样用（完整示例），帮你理解缓存的实际价值：

javascript 复制代码

<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，但图表配置通常用内存缓存就足够。