javascript - 未在数据对象中定义时VueJS变量值不会更新

我有个问题。当我没有在vue实例的数据中定义变量a时，它不会更新以匹配新值。

<div id="app">
  <p>{{ a }}</p><br>
  <input type="text" v-model="a">
</div>

new Vue({
  el: "#app",
  data: {
  },
})

但当我在数据中使用form时，它会起作用。为什么会有这样的区别？

<div id="app">
  <p>{{ form.a }}</p><br>
  <input type="text" v-model="form.a">
</div>

new Vue({
  el: "#app",
  data: {
    form:[]
  },
})

另外，在同时使用a和form的情况下，当我更改输入a时，文本元素不会更新。当我更改输入时，文本元素form.a和a都会更新。有人能解释一下这种行为吗？

<div id="app">
  <p>{{ a }}</p><br>
  <input type="text" v-model="a">
  <p>{{ form.a }}</p><br>
  <input type="text" v-model="form.a">
</div>

new Vue({
  el: "#app",
  data: {
    form:[]
  },
})

我的例子：https://jsfiddle.net/0g8npdev/6/

最佳答案

a没有更新的原因是它没有反应。
这里有一篇关于VueJS文档中反应性的好文章：https://vuejs.org/v2/guide/reactivity.html
上面写着：
变化检测注意事项
由于现代JavaScript的局限性（以及放弃）
对象。注意），Vue无法检测属性的添加或删除。
由于VUE在执行过程中执行了GETTE/SETER转换过程
实例初始化，属性必须存在于数据对象中
以便Vue将其转换并使其具有反应性。
回到你的问题：
让我们看看如何在vue中进行渲染。
首先，它为数据对象中的所有属性定义getter和setter（使用defineProperty方法）。因此，每次更改模型（即a或form）时，调用SETER方法，它将通知观察者进行更改。
但是，由于数据对象中没有属性a，因此Vue不会为其定义任何setter。因此，当您更新输入值时，无法将更改通知观察者。（意味着，dom不会被更新）。
现在，同样的事情也发生在form模型上。但是，由于您已经在数据对象中定义了该方法，Vue将为其添加getter和setter方法。因此，当使用form模型更新输入框时，它将通知观察者重新呈现更改。
这就是为什么只有当a被更改时才会呈现form.a的更改：）
这是我能为这种行为做的最基本的解释。希望这是清楚的。如果您有任何疑问，请随时询问。
这篇文章可能会帮助你：https://medium.com/@koheimikami/understanding-rendering-process-with-virtual-dom-in-vue-js-a6e602811782

关于javascript - 未在数据对象中定义时VueJS变量值不会更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51202335/