Question

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

这是codepen链接：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

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

实际上，我们有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的值的情况下使用计算属性获得所需的输出。如果必须更改该值，请在一个单独的函数中进行更改，该函数可以从生命周期挂钩或显式操作（例如，单击或事件）中调用。在其余的代码中，您将可以按原样使用this.number。

Answer 2

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

只需将return x替换为return this.number

跟随this.number--;会减小number的值，但是由于您没有使用数据属性{{number}}，因此不会显示它。

只要看一下，您就会明白。我希望。 updated code

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

希望有帮助。

Answer 3

在javascript中，primitive types是passed by value。您正在变量this.number中保存x的值。此变量x是全新的副本。因此，更改this.number并不意味着x也会更改。因此，更改x的值。

这里是updated codepen

Vue反应性：计算后会更改数据，但没有反应

3 个答案: