javascript - Vue react 性 : Computed changes data but then is not reacting to it

Question

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

这是代码笔链接:https://codepen.io/MH88/pen/oMbBzZ?editors=1011

这里是代码片段。

//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
    }
  }
});

期待一些想法。

Answer 1

您目前没有按照设计的方式使用计算属性。

在 vue 中我们有 data 来定义初始数据。如果您以这种方式定义数据:

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 的值，但请考虑是否可以使用计算属性在不更改 number 的值的情况下获得所需的输出。如果您必须更改该值，请在从生命周期 Hook 或显式操作(例如点击或事件)调用的单独函数中执行。您可以在其余代码中使用 this.number 然后按原样使用。