>我有一个问题。当我没有在 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和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/
a没有更新的原因是因为它不是反应性的。
这里有一篇关于 vuejs 文档中关于反应性的好文章：https://v2.vuejs.org/v2/guide/reactivity.html
它说：
更改检测注意事项
由于现代JavaScript的局限性(以及放弃 Object.observe(，Vue 无法检测属性的添加或删除。 由于 Vue 在 实例初始化，数据对象中必须存在属性 为了让 Vue 转换它并使其反应式。
回到你的问题：
让我们来看看渲染是如何在 Vue 中完成的。
首先，它为数据对象中的所有属性定义 getter 和 setter(使用 defineProperty 方法(。所以每次你改变模型(即a或form(，将调用 setter 方法，它将通知观察程序呈现更改。
但是，由于您的数据对象中没有属性a，vue 没有为它定义任何setter。因此，当您更新输入值时，无法通知观察者有关更改的信息。(意味着，DOM 不会被更新(。
现在，同样的事情也发生在form模型上。但是由于你已经在数据对象中定义了它，vue 将为它添加 getter 和 setter 方法。因此，当您使用form模型更新输入框时，它将通知观察程序重新呈现更改。
这就是为什么只有当form.a更改时才会呈现a的更改:)
这是我能对这种行为做的最基本的解释。希望清楚。如果您有任何疑问，请随时询问。
这篇文章可能会帮助你： https://medium.com/@koheimikami/understanding-rendering-process-with-virtual-dom-in-vue-js-a6e602811782
如果你希望有 2 向数据绑定，你应该在 Vue 实例的数据对象中声明变量a。
<div id="app">
<p>{{ a }}</p><br>
<input type="text" v-model="a">
</div>
new Vue({
el: "#app",
data: {
a: ''
},
})
如果您需要代码，请参考@iridescent的答案。
行为解释：
Vue 的核心是反应性。正如 vue 文档中提到的，当您将 JS 对象放在数据选项中时，它就会出现。
当你将一个普通的 JavaScript 对象作为其数据传递给 Vue 实例时 选项，Vue 将遍历其所有属性并转换它们 使用 Object.defineProperty 的 getter/setters。
所以首先要采取的是，如果你不把a放在数据选项中，它就不会是反应式的，正如你把form放在数据选项中一样，因此form.a是反应式的(Vue 会将属性'a'转换为 setter/getter(。
现在为什么当您更新 jsfiddle 链接中的form.a时只有a更新
正如form是反应式的，使form.a也是反应式的，所以每当任何反应式属性更新时，Vue 都会更新虚拟 Dom，然后反映在nextTick()的实际 dom 中。简单来说，a在内存中更新但不反映在 dom 中，因为它不是反应式的，但是随着form.a(反应式属性(的更新，virtualdom 会获取更改并更新它们。因此，随着form.a，a的当前值也会更新。这是 vue 的预期行为。
我建议您在此处阅读深入的反应性文档
我希望它有所帮助。