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

Question

我相当确定这是一个非常简单的问题，但我花了大约 3 个小时试图弄清楚它无济于事。如果我在 Vue 对象内绑定一个变量，即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

如果我在 Vue 对象中绑定一个变量，即 data: {x: a} 其中 a 是某个变量，然后我更改了 a 的值，我的印象是它会将 data.x 的值更改为嗯，不是吗？这种误解是造成麻烦的原因，它与 Vue 无关，而是与 Javascript 和对象引用的工作方式有关。简而言之：您的陈述仅当a是一个对象时才为真。在您的示例中，它不是，它是原始 Number 类型。为什么这有关系？因为在 Javascript 中，当一个变量持有一个对象时，它实际上只包含对该对象的引用。但是当变量包含原始类型时，它包含实际值。&nbsp;这意味着多个变量可能持有对同一个对象的引用。如果a一直是个对象，then--由于Javascript对象的性质references--设置{x: a}岂不是x和a每个商店引用同一个对象。您可以认为此对象不属于x或a，它们存储对它的引用。如果您随后从x或 中更改此对象的属性a，它将在两个地方都反映出来。但既然a是一个数字，那么——由于 Javascript 原语的性质——设置{x: a}意味着x接收a' 的值的副本，因为它在那一刻。没有参考，没有联系。它们都立即包含完全独立的原始值。

Answer 2

当你声明a: x.a您正在分配一个初始值。如果要更新该值，则需要对 Vue Object 内部的变量进行更改。最佳实践，在组件内部使用方法：var myVue = new Vue({&nbsp; el: "#app",&nbsp; data: {&nbsp; &nbsp; unlocked: false,&nbsp; &nbsp; a: 0,&nbsp; &nbsp; b: 10&nbsp; },&nbsp; methods: {&nbsp; &nbsp; &nbsp;increment() {&nbsp; &nbsp; &nbsp; &nbsp; this.a++&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.a)&nbsp; &nbsp; &nbsp;}&nbsp; }});myVue.increment()console.log(myVue.a)