Vue.js中$watch能否监听props？实测遇监听失效问题

嘿，我之前也碰到过Vue响应式系统的这个问题！你遇到的情况是：父组件传递对象类型的props给子组件后，在父组件里给这个对象新增属性，子组件的watch却监听不到变化。这其实是Vue响应式的特性，不是bug，下面给你详细分析和解决办法：

问题根源 #

Vue的响应式系统会在初始化时对data里的对象属性做响应式追踪，但直接给对象新增属性（比如你写的this.pass_data.c = 'c'）并不会触发响应式更新——因为这个新属性没有被Vue的响应式系统“注册”过，所以子组件的watch自然捕捉不到变化。

三种可行解决方案 #

你可以根据自己的业务场景选合适的方法：

1. 用this.$set添加属性 + 子组件开启深度监听 #

在父组件的add_select_data方法里，用this.$set来新增属性，这样Vue会自动把新属性纳入响应式系统：

methods: {
  add_select_data() {
    this.$set(this.pass_data, 'c', 'c')
    console.log('add c')
  }
}

然后在子组件的watch里开启deep: true，监听对象内部属性的变化：

export default {
  props: {
    pass_data: {
      type: Object,
      required: true
    }
  },
  watch: {
    pass_data: {
      handler(newVal) {
        console.log('props更新了:', newVal)
      },
      deep: true // 开启深度监听
    }
  }
}

2. 替换整个对象（利用引用变化触发响应） #

如果你不想用$set，可以通过创建新对象替换原有的pass_data——Vue会检测到对象引用的变化，从而触发watch：

methods: {
  add_select_data() {
    this.pass_data = {
      ...this.pass_data, // 展开原有所有属性
      c: 'c' // 新增属性
    }
    console.log('add c')
  }
}

这种情况下，子组件的watch不用开深度监听，浅层监听就能捕捉到引用变化：

watch: {
  pass_data(newVal) {
    console.log('props更新了:', newVal)
  }
}

3. 提前定义所有可能的属性 #

如果能提前预知对象会有哪些属性，可以在父组件初始化pass_data时就把所有属性都定义好（哪怕初始值是空），这样后续修改属性时就能触发响应式：

data() {
  return {
    pass_data: {
      a: 'a',
      b: 'b',
      c: '' // 提前定义好c属性
    }
  }
},
methods: {
  add_select_data() {
    this.pass_data.c = 'c' // 现在修改会触发响应式
    console.log('add c')
  }
}

子组件同样需要开启deep: true的watch来监听内部属性变化。

总结 #

最常用的是前两种方法：$set+深度监听适合偶尔新增属性的场景；替换对象的方式则更清晰，适合频繁修改属性的情况。选哪种都能解决你的问题~

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