VUE之计算属性computed

计算属性computed 是为了减少类似模板逻辑的出现，并且让属性支持多行表达式

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

如果项目中频繁使用 会降低代码可读性 并且难以维护，并且如果是多行的表达式也不能适用
这时候就要用到计算属性computed了

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: “Hello”

Computed reversed message: “olleH”

PS:
vm.reversedMessage 的值始终取决于 vm.message 的值。
即message变化reversedMessage也会跟着变化