为什么要在 vue.js 中计算属性？

Question

我是 vue.js 的初学者。使用计算属性而不是方法的原因是什么。为什么要问这个问题，因为计算属性和方法都做同样的事情

Answer 1

方法可以获取属性，需要手动调用，计算则不然。 此外，您无需在多次使用时克隆代码。将计算属性想成是您的附加逻辑的捷径。

在模板中加入过多的逻辑会使它们变得臃肿且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

同样，使用计算属性：

<div id="example">
  {{ reversedMessage }}
</div>

Vue 代码：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

区别

但我认为主要区别在于缓存。当您调用 method 5 次时，您将获得 5 次计算。另一方面，计算属性只计算一次（在更改时），然后返回一个缓存值。