Vue js 观察者不会对更改做出反应

Question

我看到了一些关于 vue.js 观察者的问题，但我没有找到处理我的问题的问题，所以这里是：

在我的SomeComponent.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";
},

编辑： 在Behappy的回答之后，我的组件零件现在看起来像这样：

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

Answer 1

这是因为您的prop是Object。

为了深入观看，您可以这样做：

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

并且在createdDOM 尚未渲染。因此，您发送到子组件的 prop 尚未更新。请参阅链接

与其他答案一样，更改 Object 的正确方法是使用this.$set：

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

Answer 2

如文档中所述：

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

对于对象

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

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

Vue 不允许将新的根级反应式属性动态添加到已经创建的实例中。但是，可以使用this.$set(object, propertyName, value)方法向嵌套对象添加反应式属性：

在您的情况下，这将是：

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 })