Vue对象Prop变更检测失效，deep watch未触发问题咨询

这是个非常常见的Vue响应式系统“盲区”问题，我来帮你把根因和解决办法说清楚：

问题场景回顾 #

你创建了这样的类结构：

class Parent {
  constructor () {
    this.child = new Child();
  }
}

然后把Parent的实例作为prop传给Vue组件，接着修改child的某个属性，但组件里设置了deep: true的watch却完全没反应，对吧？

核心原因 #

Vue的响应式追踪是在对象被纳入响应式系统时才生效的：

• Vue2里是通过Object.defineProperty给对象的每个属性添加getter/setter来追踪变化；
• Vue3里则是用Proxy包裹整个对象来拦截属性访问和修改。

而你这里的child对象是在Parent类的构造函数里直接实例化的，这个对象在被传到Vue组件之前，完全没有经过Vue响应式系统的处理——它的属性既没有getter/setter，也没有被Proxy包裹。哪怕你给watch加了deep: true，Vue也没法追踪一个“非响应式对象”内部的属性变化，自然不会触发watch的handler。

解决方案 #

根据你使用的Vue版本，有对应的处理方式：

针对Vue2 #

1. 在父组件中提前把整个Parent实例转为响应式

   import Vue from 'vue'
   // 创建Parent实例后，用Vue.observable让它变成响应式
   const parentInstance = Vue.observable(new Parent())
   // 再把这个实例传给子组件当prop
   

   这样parentInstance.child以及它的所有属性都会被加上响应式追踪。

2. 在子组件接收prop后手动处理child对象
   如果不想修改父组件的逻辑，可以在子组件的生命周期钩子中把child转为响应式：

   export default {
     props: ['parent'],
     created() {
       // 用$set确保child本身是响应式的，同时它的属性也会被处理
       this.$set(this.parent, 'child', this.parent.child)
       // 或者直接用Vue.observable包裹child
       // this.parent.child = Vue.observable(this.parent.child)
     },
     watch: {
       parent: {
         handler(newVal) {
           console.log('child property updated');
         },
         deep: true
       }
     }
   }
   

针对Vue3 #

Vue3的Proxy机制处理这类问题更友好，只需要用reactive包裹你的Parent实例即可：

import { reactive } from 'vue'
// 用reactive包裹后，整个对象（包括内部的child）都会变成响应式
const parentInstance = reactive(new Parent())

之后把这个parentInstance传给子组件，修改child的属性时，deep watch就能正常触发了。

额外提醒 #

如果你的Child类后续会动态添加新属性，那不管是Vue2还是Vue3，都要使用对应的响应式API来添加：

• Vue2用this.$set(child, 'newProp', value)；
• Vue3直接用child.newProp = value（因为Proxy会拦截动态属性的添加）。

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