vue中 computed与methods的区别

关于计算属性的使用

vue中模板中使用表达式是很方便的一种方式，如:

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

但是如何将太多的逻辑放入模板中处理，就会使得模板很臃肿，这样不利于代码的维护。使用计算属性很方便的解决了这个问题，不至于使得模板很臃肿复杂。

<div id="example">
  {{ message}}
</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('')
    }
  }
})

其实同样功能在methods中也能实现，

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

不过在计算属性中实现的好处是可以缓存，比如说在计算属性中计算一个值需要进行大量的操作，如果将这个计算放在methods中，则只要每次进行重绘，都会触发这个计算，这样是会很耗性能的，但如果将这个计算放在计算属性中，只要这个值不发生变化，那就不会重新计算，返回的还是这个值，这样也可以节省性能。