Question

我相当确定这是一个非常简单的问题，但是我花了大约3个小时试图弄清楚它没有任何结果。如果我将变量绑定到Vue对象内部，即public class DateTypeConverter { @TypeConverter public static Date toDate(Long value) { return value == null ? null : new Date(value); } @TypeConverter public static Long toLong(Date value) { return value == null ? null : value.getTime(); } }，其中a是某个变量，然后更改data: {x: a}的值，那么我的印象是它将更改{{ 1}}也一样，不是吗？

我目前正在尝试使用if语句涉及不等式的a / data.x链，但是即使在计算结果应为v-if之后，显示的内容也不会改变。我编写了一些示例代码，并附带了一个JSFiddle。

v-else

还有JS：

true

https://jsfiddle.net/ny5phzqe/

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

Answer 1

如果我将变量绑定到Vue对象内部，即数据：{x：a}，其中a是某个变量，然后更改a的值，那么我的印象是它将更改数据的值.x也一样，不是吗？

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

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

如果a是对象，则由于Java语言对象引用的性质，设置{x: a}意味着x和a都存储一个引用到同一对象。您可以认为该对象不属于x或a，它们都存储了对该对象的引用。然后，如果要从x或a对该对象的属性进行更改，则会在两个地方都反映出来。

但是由于a是一个数字，所以由于Java语言原语的性质，设置{x: a}意味着x收到a的副本当时的价值。没有参考，也没有连接。它们都立即包含完全独立的原始值。

Answer 2

答案是是和不是。 Vue将监视data.a，并直接对其进行更新，但是您正在更改x.a，并希望data.a更新。那行不通。

您的代码流大致如下：

创建对象X
创建Vue实例
使用值为x.a（0）的数据属性a初始化Vue
定义一个递增x.a的函数
调用增量函数（操纵x）

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

这是如何更改数据的有效示例。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)
        }
    });

查看这个小提琴 https://jsfiddle.net/m46sa3og/1/

Answer 3

声明时

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.js似乎没有在变量更改时更新DOM

3 个答案: