响应式系统如何处理嵌套的 Map 和 Set？深度解析 Vue3 对新型集合的支持-Vue.js-PHP中文网

vue 3响应式不自动穿透map/set嵌套：仅结构变更（add/delete）可响应，内部对象属性修改需显式reactive包裹+模板读取触发依赖；weakmap/weakset不支持响应式。

响应式系统如何处理嵌套的 map 和 set？深度解析 vue3 对新型集合的支持

Vue 3 的响应式系统对嵌套的 Map 和 Set 并不自动“穿透”处理——它只保证集合结构本身的变化可响应，而不会递归地将内部元素也转为响应式，除非你显式创建。

嵌套 Map/Map 或 Map/Set 时，响应式边界在哪？

当你把一个 reactive 对象放进 Map 或 Set，这个对象自身保持响应式；但 Map 或 Set 仅监听自己结构的变更（如 set()、add()、delete()），不监听其内部元素属性的修改是否触发集合更新。

✅ map.set('user', reactive({ name: 'Alice' }))：user 是响应式对象，user.name = 'Bob' 会触发依赖该 user 的副作用（比如 computed 或 effect），但不会导致 map 自身重新渲染或触发 map 的 size/keys 依赖更新
✅ map.set('config', new Map())：这个内层 Map 若也用 reactive() 包裹，它就拥有独立响应式能力；否则只是普通 Map，无法响应其内部变化
❌ map.set('list', [1, 2, 3])：数组若未被 reactive 包裹，修改其元素不会触发任何响应；即使包裹了，map 本身也不会因数组内容变而“感知”——只有你读取 map.get('list') 后再访问其 length 或索引，才可能触发对应依赖

嵌套 Set 中的对象，修改属性为何不刷新视图？

Set 的响应式机制聚焦于“成员增删”，而非“成员状态”。它的依赖收集发生在调用 add()、delete()、forEach()、values() 等方法时，追踪的是集合的 结构快照（如当前有哪些值、size 多大），不是每个值的深层字段。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

例如：const s = reactive(new Set()); s.add({ id: 1, count: 0 }); → 此时添加的是普通对象，count 变化不会让 v-for 重渲染
若改为：s.add(reactive({ id: 1, count: 0 }))，则 count 变化会触发该对象相关的 effect，但 Set 本身的遍历模板不会自动 re-run，除非你主动读取 s.values() 或使用 for...of 触发 track
关键点：Set 不为每个元素单独建立“内容依赖”，只为其整体迭代行为（如 s.forEach）和结构属性（s.size）建立依赖

如何让深层嵌套真正“联动”更新？

靠 Vue 自动推导不够，需结合模式设计与手动触发：

统一用 reactive 包裹所有可变数据节点：包括 Map/Map、Map/Set、Set/Object 等每一层，避免混用原始对象
在模板中显式触发读取：比如 v-for="[k, v] of myMap" 会调用 myMap.entries()，从而 track 到 key-value 对；若只写 {{ myMap.size }}，那只有 size 变更才触发
用 computed 封装派生状态：例如 computed(() => Array.from(myMap.values()).map(v => v.name))，这样内部对象属性变化就能驱动 computed 更新，进而触发视图
避免绕过代理的操作：永远不用 map['key'] = value 或 set[Symbol.iterator] = ...，这些跳过 collectionHandlers，完全丢失响应性

源码层面：collectionHandlers 怎么应对嵌套？

Vue 3 的 mutableCollectionHandlers 中的 get 函数会识别方法名（如 'get'、'add'、'values'），并分发到对应增强逻辑。当访问 map.get(key) 时，它不只返回值，还会调用 track 记录对 key 的依赖；当访问 map.values()，它返回一个包装过的迭代器，每次 next() 都会触发对当前项的 track。