javascript - Vue.js 似乎没有在变量更改时更新 DOM

Question

我相当确定这是一个非常简单的问题，但我花了大约 3 个小时试图解决它，但无济于事。如果我在 Vue 对象中绑定(bind)一个变量，即 data: {x: a} 其中 a 是某个变量，然后我更改 a 的值，我是印象中它也会改变 data.x 的值，不是吗？

我目前正在尝试 v-if/v-else 链，其中 if 语句涉及不等式，但即使在它应该计算为 之后true，显示的内容不变。我制作了一些示例代码和一个 JSFiddle。

<div id="app">
  <button v-if="unlocked">
    Unlocked
  </button>
  <button v-else-if="a >= b">
    Available
  </button>
  <button v-else>
    Unavailable
  </button>
  <span>{{a}}</span>
</div>

还有 JS:

var x = {
    unlocked: false,
  a: 0,
  b: 10,
}

new Vue({
  el: "#app",
  data: {
    unlocked: x.unlocked,
    a: x.a,
    b: x.b
  },
});

function y() {
    x.a++;
  console.log(x.a);
}

var z = setInterval(y, 250);

https://jsfiddle.net/ny5phzqe/

它增加了变量，但文本和显示的按钮都没有改变。我是否从根本上误解了有关 Vue 的某些内容？

Answer 1

If I bind a variable inside of a Vue object, i.e. data: {x: a} where a is some variable, and then I change the value of a, I was under the impression that it would change the value of data.x as well, no?

这种误解是造成麻烦的原因，它与 Vue 无关，而是与 Javascript 和对象引用的工作方式有关。简而言之:只有当 a 是一个对象时，您的陈述才为真。在您的示例中不是，它是原始数字类型。

为什么重要？因为在 Javascript 中，当一个变量持有一个对象时，它实际上只包含对该对象的引用。但是，当一个变量包含基本类型时，它包含实际值。这意味着多个变量可能包含对同一对象的引用。

如果 a 是一个对象，那么——由于 Javascript 对象引用的性质——设置 {x: a} 将意味着 x 和 a 分别存储对同一对象的引用。您可以将此对象视为不属于 x 或 a，它们存储对它的引用。如果您随后从 x 或 a 更改此对象的属性，它会反射(reflect)在两个地方。

但由于 a 是一个数字，那么——由于 Javascript 原语的性质——设置 {x: a} 意味着 x 收到 a 的值的副本，因为它在那个时刻是这样的。没有引用，没有联系。它们都立即包含完全独立的原始值。