Vue中的计算属性理解，简单易懂

什么是Vue中的计算属性

计算属性故名思意，是具有计算表达式的一个属性，或者说是一个值。
在Vue中，我们有时会在模板中对数据进行一些逻辑处理。这个时候就非常的不好看，也难以维护。比如像下面的代码：

<div id=“app”>
{{ message.split('').reverse().join('') }}
</div>

这里我们像在渲染message时，将其反转，并不是简单的将数据渲染上去。
又或者是这种情况

<span>{{ books.length > 0 ? 'Yes' : 'No' }}</span>

这里我们不是想直接渲染数据，而是将根据数据，渲染其他结果选项。
类似这类，用计算表达式表示结果的情况，Vue用计算属性来处理替换，提高代码的可读性和维护性

Vue中如何使用计算属性

例如，我们想要获取到一串字符串的翻转字符串，我们可以利用计算属性来做
原来基础的写法：

<div id=“app”>
{{ message.split('').reverse().join('') }}
</div>

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }

计算属性写法：

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ reversedMsg}}
</div>

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMsg: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

怎么样，是不是很好理解，值得注意的是，其中，计算属性 reversedMsg，是一个方法，在message数据改变时，reversedMsg会自动调用，从而同步对页面上的数据进行更新

深入计算属性
另外，计算属性除了写成一个函数之外，还可以写成一个对象，对象内有两个属性，getter&setter，这两个属性皆为函数，写法如下：

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.message.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

当我们去获取某一个计算属性时，就会执行getter函数，
setter函数是可选的，setter函数在给计算属性重新赋值时会执行。 参数：要被重新设置的值。