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 中，当一个变量持有一个对象时，它实际上只包含对该对象的引用。但是当变量包含原始类型时，它包含实际值。 这意味着多个变量可能持有对同一个对象的引用。

如果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({

  el: "#app",

  data: {

    unlocked: false,

    a: 0,

    b: 10

  },

  methods: {

     increment() {

        this.a++

        console.log(this.a)

     }

  }

});

myVue.increment()

console.log(myVue.a)