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

Question

我相当肯定这是一个非常简单的问题，但我花了大约3个小时试图找出它无济于事。如果我在Vue对象中绑定一个变量，即data: {x: a}a是某个变量，然后我改变了值a，我的印象是它会改变值data.x，不是吗？我正在尝试一个v-if/ v-elsechain，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

当你申报时

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)