Vue prop是对象。变更检测不起作用

Question

我想请求解释以下情况。

我有一个对象，里面包含其他对象。我将此对象作为prop传递给vue组件。

classs parent {

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

}

然后，我更改子对象的属性。但是，以下vue代码没有做任何事情，似乎甚至没有调用watch方法。

    watch : {
        property : {
            handler (newVal) {
                console.log('property updated');
            },
            deep: true
        }

    },

因为vue prop实际上是对Parent对象的引用，所以它被更改。现在，如果Child发生变化，如何检测Parent的变化？

Answer 1

如果您正在更改的数据项在成为Vue数据之前存在，那么这样可以正常工作。换句话说，唯一被反应的项目是Vue在构建实例时所知道的那些项目。

Vue cannot detect property addition。如果您想要添加孩子或孩子的成员，您需要使用$set或通过分配已经被动的元素来进行更改。

＆＃13;

＆＃13;

class Child {
  constructor() {
    this.a = 'one';
  }
}

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

new Vue({
  el: '#app',
  data: {
    p: new Parent()
  },
  watch: {
    p: {
      handler(newVal) {
        console.log('property updated', newVal);
      },
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.p.child.a = 'two';
    }, 500);
    setTimeout(() => {
      this.$set(this.p.child, 'b', 'something completely new');
    }, 2500);
  }
});

＆＃13;

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对象和数组的更改检测只能在引用更改的基础上工作。

执行parent.prop="whatever"，然后parent = {...parent}更改引用并使Vue接受更改。

  

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats