Vue.js：如何监听子组件中Map类型Prop的更新？

这其实是Vue 2响应式系统的一个局限性：Vue默认能自动追踪数组的变更方法（比如push、pop）和普通对象的属性修改，但对于原生Map这类集合类型，它的内部操作（比如set、delete）属于原生JS行为，Vue的响应式机制无法感知到这些内部变化——因为Vue并没有对Map的原型方法做响应式包装。而你看到数组能正常触发watch，正是因为Vue重写了数组的这些方法，调用时会自动通知依赖更新。

这里有几个可行的办法，你可以根据需求选择：

1. 替换Map的引用（最简单直接） #

既然Vue能检测到引用类型的引用变化，那我们可以在更新Map时，创建一个新的Map实例来替换旧的：

// 父组件的updateData方法修改为：
updateData() {
  // 复制原Map的所有内容，修改后赋值给mapData
  this.mapData = new Map(this.mapData).set("A", this.mapData.get("A") + 1);
  this.arrayData.push("newData");
}

这样mapData的引用从旧Map变成了新Map，Vue会立刻检测到这个变化，子组件的watch就能正常触发了。

2. 将Map转为普通对象（更符合Vue响应式习惯） #

如果业务场景允许，把Map换成普通JS对象是最贴合Vue响应式系统的方案：

// 父组件data修改：
data() {
  return {
    mapData: {}, // 用普通对象替代Map
    arrayData: []
  }
},
created() {
  this.mapData["A"] = 0; // 直接给对象赋值
},
updateData() {
  this.mapData["A"] = this.mapData["A"] + 1; // 修改对象属性，Vue能自动检测
  this.arrayData.push("newData");
}

这种方式不需要额外处理，子组件的watch可以完全正常工作，因为Vue对普通对象的属性变化有完善的追踪机制。

3. 手动触发响应式更新（不推荐，性能较差） #

如果必须保留Map类型，也可以在更新后手动调用$forceUpdate()强制组件重新渲染，但这个方法会触发整个父组件及子组件的重渲染，可能带来性能问题，只建议在极端场景下使用：

// 父组件updateData方法：
updateData() {
  this.mapData.set("A", this.mapData.get("A") + 1);
  this.arrayData.push("newData");
  this.$forceUpdate(); // 强制触发响应式更新
}

如果是Vue 3的项目，这个问题会简单很多——Vue 3的响应式系统基于Proxy，能直接追踪Map、Set这类原生集合的内部变化，你只需要用reactive(new Map())包裹Map实例，就能自动监听它的set/delete操作了。

内容的提问来源于stack exchange，提问作者brian661