Javascript Vue.js似乎没有根据变量更改更新DOM

我相当肯定这是一个非常简单的问题，但我花了大约3个小时试图解决它，但没有结果。如果我在Vue对象内部绑定一个变量，即

data:{x:a}

其中a是某个变量，然后我更改

a

的值，我的印象是它也会更改

data.x

的值，不是吗

我目前正在尝试一个

v-if

/

v-else

链，if语句涉及一个不等式，但即使它的计算结果应该是

true

，显示的内容也不会改变。我制作了一些示例代码，并附带了一个JSFIDLE

<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>

它会增加变量，但文本和显示的按钮都不会更改。我是否从根本上误解了Vue？

当您声明

a: x.a

您正在指定初始值

如果要更新该值，需要对Vue对象内部的变量进行更改。最佳做法是在组件内部使用一种方法：

var myVue = new Vue({
  el: "#app",
  data: {
    unlocked: false,
    a: 0,
    b: 10
  },
  methods: {
     increment() {
        this.a++
        console.log(this.a)
     }
  }
});
myVue.increment()
console.log(myVue.a)

---

答案是“是”和“否”。Vue将监视data.a并直接更新它，但您正在更改x.a并希望data.a更新。那不行

您的代码流程大致如下：

创建对象X

创建Vue实例

使用值为x.a（0）的数据属性a启动Vue

定义一个递增x.a的函数

调用增量函数（即manux）

数据a和x之间没有“联系”或反应性。Vue将根据数据的更改方式更新视图/模板。a更改，但您永远不会更改该值。你在换x.a

下面是一个如何更改数据的工作示例

new Vue({
      el: "#app",
      data: {
        unlocked: false,
        a: 0,
        b: 10
      },
      methods: {
        increment() {    
            this.a++;
            console.log(x.a);
        }    
      },
      mounted() {
        setInterval(this.increment, 1000)
        }
    });

看看这把小提琴

如果我在Vue对象内部绑定一个变量，即data:{x:a}，其中a是某个变量，然后我更改a的值，我的印象是它也会更改data.x的值，不是吗

这种误解是问题的原因，它与Vue无关，而是与Javascript和对象引用的工作方式有关。简而言之：只有当

a

是一个对象时，你的陈述才是正确的。在您的示例中，它不是，而是一个基本数字类型

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

如果

a

是一个对象，那么——由于Javascript对象引用的性质——设置

{x:a}

将意味着

x

和

a

各自存储对同一对象的引用。您可以将此对象视为不属于存储对其引用的

x

或

a

。如果随后要从

x

或

a

对此对象的属性进行更改，则这两个位置都会反映出来

---

但是由于

a

是一个数字，那么——由于Javascript原语的性质——设置

{x:a}

意味着

x

接收

a

值的副本，因为它在那一刻。没有引用，没有连接。它们都立即包含完全独立的基本值。

噢！我猜我只是在某种程度上严重误读了其中一页。其中一部分，我的意思是，如果更改原始变量，它也会更改Vue对象中的变量，反之亦然。特别是部分。谢谢你的澄清！这只是让它点击，非常感谢！我应该简单地设置

数据：{x:x}

，然后呢？或者这是一种不好的做法？欢迎：）就最佳做法而言：

x

正在费力地替换组件的数据对象，

z

正在替换事件处理程序，所有这些都在组件外部。检查以了解如何完成我的实际项目，许多其他功能可以添加到小提琴中的

x.a

，并且将有多个“组”需要依赖于

x.a

的更改。我是否希望简单地包含一个方法，以便在变量更改时也更改每个依赖的Vue对象？或者将其设置为对象会更好吗？每当某个内容依赖于某个组件

数据的更改时，它通常会调用
计算的
属性。如果你想把一把粗糙的小提琴和一个破碎的例子联系起来，我可以试着纠正它。当然，我会很感激的！再次感谢您的帮助。如何清除间隔（）？
new Vue({
      el: "#app",
      data: {
        unlocked: false,
        a: 0,
        b: 10
      },
      methods: {
        increment() {    
            this.a++;
            console.log(x.a);
        }    
      },
      mounted() {
        setInterval(this.increment, 1000)
        }
    });