Javascript Vue反应性：计算更改数据，但随后未对其作出反应

我有一个简单的设置。“计算”用于检索数据。在一个简单的条件下，数据有时应该更改。然后我希望，数据的变化会再次触发“计算”结果。但事实并非如此。我当前的解决方案是设置超时，因为这会再次触发“计算”

以下是代码笔链接：

这里是代码片段

//HTML Output
<div id="app" class="l-container l-vPad--mid">
  <h1>This should return 4</h1>
    <h2>getNumber: {{getNumber}}</h2>   
</div>

//Javascript logic
new Vue({
el: '#app',
data: {
    number: 5
  },
  computed: {
    getNumber() {
      var x = this.number;
      if(this.number == 5) {

          //Why is this not working?As data changes, the computed should 
          //react to it again, no?
          this.number--;

          //This solution works but there needs to be something more eloquent
          //setTimeout(() => {this.number--}, 0);

      }
      return x
    }
  }
});

//HTML输出
这应该返回4
getNumber:{{getNumber}}
//Javascript逻辑
新Vue({
el:“#应用程序”，
数据：{
电话：5
},
计算：{
getNumber（）{
var x=这个数字；
如果（this.number==5）{
//为什么这不起作用？随着数据的变化，计算出的
//再做一次反应，不是吗？
这个数字--；
//这个解决方案是可行的，但还需要一些更有说服力的东西
//setTimeout（（）=>{this.number-->，0）；
}
返回x
}
}
});

---

期待一些想法。

您正在返回值为“5”的变量“x”，因为您使用“var x=this.number”保存了它。不要返回保存的值“return x”，而是使用“return this.number”

只需将

return x

替换为

return this.number

以下

this.number--

正在减少number的值，但由于您没有使用数据属性

{{number}}

，因此不会显示它

看看这个，你会明白的。我希望如此。

计算属性是函数，因此您应该返回更改后的值。 检查文档

希望有帮助。

在javascript中是。您正在变量

x

中保存

this.number

的值。此变量

x

是全新的副本。所以改变

这个.number

并不意味着

x

也会改变。因此，请更改

x

的值

---

以下是您当前未按设计方式使用计算属性的问题

在vue中，我们有

数据
来定义初始数据。如果以这种方式定义数据：

data() {
  return {
    number: 5
  }
}

您可以使用
this.number
访问您的号码。您需要将其定义为函数，因为每次创建组件时都需要调用此函数。将其定义为函数可防止在不同组件之间使用相同的对象引用，从而导致各种问题

计算属性是基于其他数据计算属性的函数。当计算属性所依赖的数据发生更改时，将自动重新计算该属性。这会自动工作，但只有在功能没有副作用的情况下才能工作。您的计算函数确实有副作用（即它更改组件上的数据），这会阻止此机制工作。计算属性的一个示例是

computed: {
  differenceFromHundred() {
    return 100 - this.number;
  },

  numberThatCannotBeFive() {
    let x = this.number;
    if (x === 5) {
      return x - 1;
    }

    return x;
  }
}

如果你的函数确实有副作用，你必须使用一种方法。方法在调用时返回一个值，就像常规函数一样

methods: {
  // This name is misleading. You expect it to just 'get a value', but instead
  // it modifies it sometimes
  getNumber () {
    let x = this.number;
    if(this.number === 5) {
      this.number--;
    }

    return this.number
  }
}


不清楚为什么要修改数字的值，但是考虑一下，如果你可以使用一个计算属性来获得你想要的输出而不改变数字的值。如果必须更改该值，请在从生命周期挂钩或显式操作（例如单击或事件）调用的单独函数中执行。您可以使用
这个.number
，然后在代码的其余部分使用它。
thx。虽然这是可行的，但我需要重新开始“计算”属性，因为我的“真实生活”示例基于数据进行了大量计算。我的目标是确保重新计算属性。我通过setTimeout函数实现了这一点，但希望有另一种解决方案。@betzebube1000，computed属性取决于
this.number
。每当
this.number
的值更改时，就会调用它。参见这个例子thx。这当然有效，但由于我的“真实生活”示例更复杂，我需要确保“计算”属性基于现在更新的数据属性再次运行。使用setTimeout，这是可行的。但我希望有其他解决方案。我调用了一个单独的方法来更改数据，但由于这是在“computed”属性中调用的，“computed”属性不会再次运行。这是因为在这种情况下，您的computed属性仍然有副作用。您的计算属性应该只做计算。