Vue.js中Props的Watch监听失效问题求助（附示例代码）

嘿，咱们来搞定你的Vue props监听失效问题～ 从你给出的代码片段来看，问题几乎肯定出在对象类型props的监听逻辑上，结合常见的踩坑点，我来帮你排查并解决：

先明确问题根源 #

你子组件接收的counter1和counter2是对象类型的props，Vue中对象/数组是引用传递的。默认情况下，watch是浅监听——只有当props的引用发生变化（比如父组件直接给counter1赋值一个新对象）时才会触发；但如果只是修改对象内部的属性（比如counter1.count），因为引用没改，默认watch就不会触发。

另外，你子组件里的count1和count2如果是想同步props的值，初始化和更新逻辑可能也需要调整。

先补全你可能的错误watch写法 #

假设你原来的watch是这样写的（这是常见的错误写法）：

watch: {
  counter1(newVal) {
    this.count1 = newVal.count;
  },
  counter2(newVal) {
    this.count2 = newVal.count;
  }
}

这种写法只会在counter1的引用改变时触发，修改内部属性count完全不会触发监听。

解决方案来了，三种方式任你选 #

方案1：开启深度监听（deep: true）

针对对象类型的props，开启深度监听就能捕获内部属性的变化：

Vue.component('counters', {
  template: '<h1>{{count1}} {{count2}}</h1>',
  props: {
    counter1: { type: Object },
    counter2: { type: Object }
  },
  data: function() {
    return {
      // 初始化时同步props的值
      count1: this.counter1.count,
      count2: this.counter2.count,
    }
  },
  watch: {
    counter1: {
      handler(newVal) {
        this.count1 = newVal.count;
      },
      deep: true // 关键：开启深度监听
    },
    counter2: {
      handler(newVal) {
        this.count2 = newVal.count;
      },
      deep: true
    }
  }
});

别忘了父组件的点击方法要正确修改属性（而不是替换对象）：

new Vue({
  el: '#app',
  data: {
    counter1: { count: 0 },
    counter2: { count: 0 }
  },
  methods: {
    onClick() {
      this.counter1.count++;
      this.counter2.count++;
    }
  }
});

方案2：直接监听对象的具体属性路径

如果只关心对象里的count属性，直接监听属性路径更高效，不需要开启深度监听：

watch: {
  // 直接监听counter1的count属性
  'counter1.count'(newVal) {
    this.count1 = newVal;
  },
  'counter2.count'(newVal) {
    this.count2 = newVal;
  }
}

方案3：用计算属性替代watch（更推荐）

如果你的count1和count2只是用来同步props的值，完全可以用计算属性替代watch——这更符合Vue的响应式设计，代码也更简洁：

Vue.component('counters', {
  template: '<h1>{{count1}} {{count2}}</h1>',
  props: {
    counter1: { type: Object },
    counter2: { type: Object }
  },
  // 去掉data里的count1、count2，改用计算属性
  computed: {
    count1() {
      return this.counter1.count;
    },
    count2() {
      return this.counter2.count;
    }
  }
});

这种方式下，计算属性会自动响应counter1.count和counter2.count的变化，不需要手动维护监听逻辑，省心又高效～

最后总结一下 #

• 处理对象/数组类型的props时，默认watch是浅监听，修改内部属性不会触发，需要开启deep: true或者监听具体属性路径；
• 如果只是同步props的值，优先用计算属性，避免不必要的watch逻辑。

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