v-model 如何使对象的属性具有反应性？

Question

链接到我的项目： https://codesandbox.io/s/v-model-3j96f

截至我上面的链接，“组件”文件夹内有一个名为 HelloWorld.vue 的文件： inputvalue.bbbb是在数据选项中定义的反应数据，但是

奇怪的是，inputvalue.cccc在使用 v-model 输入后会变得有反应，但inputvalue.cccc不会与@input.

在这个问题（Vue.js绑定对象属性）中，第一种情况应该是不可能的。

Answer 1

使用v-model将自动使用$set来设置嵌套属性的值。这确保了它适用于数组索引，以及适用于不存在的对象属性，如您的示例所示。

如果您不熟悉$set它，请参阅此处：

https://v2.vuejs.org/v2/api/#vm-set

Vue中这部分的代码v-model在这里：

https://github.com/vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/compiler/directives/model.js#L44

在您的示例中，有两个使用的输入cccc。正如您所注意到的，如果您编辑使用的输入，v-model那么一切都会正常工作。但是，如果您首先使用:value/@input输入，那么即使您随后使用该输入，它也不起作用v-model。有点奇怪的是，这种行为是由您首先编辑这两个输入中的哪一个决定的。

其原因可以从以下代码中看出$set：

https://github.com/vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/core/observer/index.js#L212

问题是，$set如果该属性尚不存在，则只会添加反应性属性。因此，如果您首先使用:value/@input输入，它将创建一个非反应性cccc属性，一旦创建，即使您使用$set. 必须先将其删除，delete然后才能以反应方式重新添加。