如何通过Map与Proxy结合，实现配置中心按需订阅的响应式管理？

本文共计731个文字，预计阅读时间需要3分钟。

核心思路是：

1. 为什么选 Map 而不是普通对象？

Map 支持任意类型作 key（包括字符串、Symbol、甚至对象），且能保持插入顺序。在响应式配置中心中，我们常需要以 配置路径字符串（如 "api.timeout"、"theme.color"）为 key 存储对应的订阅函数集合。普通对象会把所有 key 强制转为字符串，容易冲突；而 Map 更精准、更可控。

• 配置路径含点号（"user.profile.name"）时，Map 可原样作为 key；对象则可能被误解析或覆盖
• 多个模块订阅同一路径，需用 Set 或数组存函数——Map 的 value 可直接设为 Set<Function>，天然去重
• 后续清理订阅时，map.delete("api.base") 比遍历对象属性安全高效

2. Proxy 如何配合 Map 做按需收集？

关键在 get 拦截器里：每次读取某个配置字段（如 config.api.timeout），就将当前正在执行的副作用函数（比如一个 UI 组件的渲染逻辑）注册到对应路径的 Map 条目中。

• 先用 WeakMap 缓存每个原始配置对象对应的依赖 Map：targetMap.set(rawConfig, new Map())
• 在 Proxy 的 get 中，拿到 key（如 "timeout"），再拼出完整路径（如 "api.timeout"）
• 从目标 Map 中取出该路径的订阅集合，把当前活跃的 effect 函数加进去
• 这样只有真正读过某字段的函数，才会被记录——实现真正的“按需”

3. set 阶段如何精准触发更新？

修改配置时（如 config.api.timeout = 8000），Proxy 的 set 拦截器会捕获这次赋值。此时不做全局广播，而是：

• 还原出被修改的完整路径（"api.timeout"）
• 查 Map 中该路径对应的函数集合
• 逐个调用它们（fn()），跳过没订阅此路径的逻辑
• 如果路径是嵌套对象（如 config.features），可递归触发子路径的 notify，但仅限实际被读取过的分支

4. 实际使用示例

假设你有一个配置对象：

const config = reactive({ api: { timeout: 5000 }, theme: { mode: 'dark' } })

组件 A 只读 config.api.timeout，组件 B 只读 config.theme.mode。当执行 config.api.timeout = 8000 时，只有组件 A 重新渲染；B 完全不受影响。这就是 Map + Proxy 实现的“最小粒度响应”。