Vue 的 watch 默认不响应 Map 和 Set 的内部变化，因其方法调用（如 set/add）无法被 Vue 响应式系统拦截；Vue 2 基于 defineProperty，Vue 3 虽用 Proxy 但未原生代理 Map/Set 方法，需通过监听 size、computed 派生数组或改用响应式对象/数组实现可靠监听。
Vue 的 watch 默认不响应 Map 和 Set 的内部变化（比如 map.set()、set.add()），因为它们的变更不会触发 Vue 的响应式系统。这不是 bug，而是设计限制——Vue 2/3 的响应式机制基于对象属性访问和数组索引劫持，而 Map/Set 是通过方法调用修改的，原生不支持 Proxy 拦截的全部语义（尤其 Vue 2）。
为什么直接 watch Map/Set 失效？
Vue 的响应式系统依赖对数据的“读取”和“赋值”进行拦截：
-
Object：通过defineProperty（Vue 2）或Proxy（Vue 3）拦截get/set -
Array：重写了push/pop等 7 个变异方法 -
Map/Set：没有被 Vue 原生代理，其.set()、.add()、.delete()等方法不会触发依赖更新
Vue 3 中推荐的监听方案
Vue 3 使用 Proxy，可手动包装 Map/Set 为响应式对象，再配合 watch 监听其状态快照或封装行为：
- 用
ref或reactive包裹后，watch 其.size属性（最轻量）：const myMap = ref(new Map());<br>watch(() => myMap.value.size, (newSize) => { console.log('Map size changed:', newSize); }); - 监听整个 Map 的结构快照（适合小数据）：
watch(myMap, (newMap) => { console.log('Map re-assigned or replaced'); }, { deep: true });
⚠️ 注意：这只在你执行myMap.value = new Map(...)时触发，不是每次.set()都触发 - 封装操作方法，统一触发更新：
const map = reactive(new Map());<br>const safeSet = (key, val) => { map.set(key, val); };<br>watch(() => Array.from(map.entries()), (entries) => { /* 更新逻辑 */ }, { deep: true });
更可靠的做法：用 computed 派生 + watch
避免监听原始集合本身，转而监听一个计算出的、可响应的值：
- 监听
Map所有键值对的数组形式：const mapEntries = computed(() => Array.from(map.entries()));<br>watch(mapEntries, (newEntries) => { /* 处理变化 */ }); - 监听
Set的数组展开：const setValues = computed(() => [...mySet.value]);<br>watch(setValues, (vals) => { /* vals 是最新值数组 */ }); - 优势：每次
map.set()或set.add()后，computed 会重新求值，从而触发 watch；缺点是频繁变更时可能有性能开销，建议配合防抖或只监听关键字段
替代思路：改用响应式数组或对象
如果业务允许，优先考虑语义更清晰、Vue 原生支持更好的结构：
- 用
ref([])存储键值对：ref([{ key: 'a', value: 1 }, ...])，天然支持增删改 watch - 用
reactive({})模拟键值映射：reactive({ a: 1, b: 2 })，watch 单个 key 或整个对象（加{ deep: true }） - 对需要唯一性+顺序的场景，可用
ref(new Set())+ 单独维护一个ref([])数组同步更新，watch 数组更稳妥
不复杂但容易忽略：Map/Set 的监听本质是“监听它的可观测表现”，而不是监听它自身。抓住这个逻辑，就能绕过底层限制，写出稳定可靠的响应逻辑。
