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

Question

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

<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:[]
  },
})

此外，在我同时使用aand的情况下form，当我更改 input 时a，文本元素不会更新。当我更改 input 时form.a，文本元素a和 都会form.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/

Answer 1

之所以a不更新，是因为它不是反应式的。

这是 vuejs 文档中关于反应性的一篇很好的文章：https ://vuejs.org/v2/guide/reactivity.html

它说：

变更检测注意事项

由于现代 JavaScript 的限制（以及 Object.observe 的放弃），Vue 无法检测属性的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 转换它并使其具有反应性。

回到你的问题：

让我们来看看在 Vue 中渲染是如何完成的。

首先，它为数据对象中的所有属性定义了 getter 和 setter（使用 defineProperty 方法）。因此，每次更改模型（即a或form）时，都会调用 setter 方法并通知观察者呈现更改。

但是，由于您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