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

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

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

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

同样，使用计算属性：

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

代码视图：

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('')
    }
  }
})

区别

但我认为主要区别在于缓存。当你调用方法5 次时，你会得到 5 次计算。另一方面，计算属性仅计算一次（更改时），然后返回缓存值。