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

How v-model make a property of object reactive?

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

根据我上面的 link,"components" 文件夹中有一个名为 HelloWorld.vue 的文件: inputvalue.bbbb 是在数据选项中定义的反应性数据,但是

奇怪的是 inputvalue.cccc 在输入 v-model 后会反应,但 inputvalue.cccc 不会反应 @input

本题(),第一种情况应该是不可能的

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

如果您不熟悉 $set,请参阅此处:

https://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 将其删除,然后才能重新添加它。