Vue计算属性（computed）的使用

在我们html中有许多数据是需要进行很多处理之后才渲染到我们的页面中的，vue中是支持在模板内进行简单运算的。但放入太多的逻辑会让模板过重且难以维护，比如：

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

所以为了更好的维护和代码的可读性，我们要养成良好的习惯。

对于任何复杂逻辑，我们都应当使用计算属性（computed）。
对于任何复杂逻辑，我们都应当使用计算属性（computed）。
对于任何复杂逻辑，我们都应当使用计算属性（computed）。

计算属性避免了我们滥用watch

重要的事情说三遍！！！

在vue中我们可以声明一个计算属性,这样就一目了然了

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

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})