Vue js watcher不会对更改做出反应

Question

我看到了一些关于vue的问题。js watchers，但我没有找到一个问题来处理我的问题，所以这里是：

在我的组件中。vue我使用以下代码：

...
props: ['value']
,
watch: {
    value(val) {
        console.log(val);
    }
},

在使用此组件的父vue页面中，我使用了以下功能：

<template>
    <div>
        <SomeComponent
            v-model="test"
        ></SomeComponent>
    </div>
</template>
data() {
    return {
        test: {}
    };
},
created() {
    this.test = this.DoSomething();
},

如果我添加了另一个属性，则不会再触发观察者：

<template>
    <div>
        <SomeComponent
            v-model="test"
        ></SomeComponent>
    </div>
</template>
data() {
    return {
        test: {}
    };
},
created() {
    this.test.Prop1 = this.DoSomething();
    this.test.Prop2 = "Test";
},

编辑：在快乐的回答之后，我的组件部分现在看起来像这样：

...
props: ["value"],
watch: {
    value: {
        handler(val) {
            console.log(val);
        },
        deep: true
    }
},

Answer 1

如文件所述：

由于JavaScript的限制，Vue无法检测到某些类型的更改。然而，有一些方法可以绕过它们来保持反应性。

对于对象

Vue无法检测到属性的添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此数据对象中必须存在一个属性，以便Vue对其进行转换并使其响应。例如：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

Vue不允许向已创建的实例动态添加新的根级别被动属性。但是，可以使用this向嵌套对象添加反应属性$设置（对象、属性名称、值）方法：

在你的情况下，那将是：

created() {
    this.$set(this.test, 'Prop1', this.DoSomething())
    this.$set(this.test, 'Prop2', "Test")
},

或者，您也可以为现有对象分配许多属性，例如，使用Object.assign（），如：

this.test = Object.assign({}, this.test, { 'Prop1': 1, 'Prop2': 2 })

Answer 2

这是因为您的prop是一个Object。

为了深入观察，你可以这样做：

watch: {
    value: {
        handler(val) {
          console.log(val);
        },
        deep: true
    }
},

而在createdDOM中还没有呈现。所以，您发送给子组件的道具尚未更新。参考链接

和其他答案一样，改变对象的正确方法是使用这个$设置：

  mounted() {
    this.$set(this.test, 'Prop1', this.DoSomething())
    this.$set(this.test, 'Prop2', 'Test')
  },