Vue计算属性和侦听器

计算属性：computed

在模板中放入太多的逻辑会让模板过重且难以维护。（computed的由来有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护）

例如：

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

对于任何复杂逻辑，我们都可以使用计算属性。
例子：

<div id="example">
    <p>信息为: "{{ message }}"</p>
    <p>信息翻转后为：: "{{ reversedMessage }}"</p>
</div>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>

运行结果为：

信息为: “Hello”
信息翻转后为：: “olleH”

你可能已经注意到我们可以通过在表达式中调用方法也可以达到同样的效果：

  <p>信息翻转后为：: "{{ reversedMessage()}}"</p>
  // 在组件中
   methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
  }
}

这确实达到了同样的效果，但不同的是计算属性是基于它们的响应式依赖进行缓存的。**只在相关响应式依赖发生改变时它们才会重新求值。**这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

在官方文档中，强调了computed区别于method最重要的两点：
1. computed是属性调用，而methods是函数调用。
2. computed带有缓存功能，而methods不是。

侦听属性：watch

侦听属性是一个对象，键是需要观察的表达式，值是对应的回调函数或者是包含选项的对象。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

watch中的firstName为一个方法，但是该方法监听的vue实例vm中同名的data属性firstName。此方法名必须与需要监听的data属性名一致才能实现有效的监听。
当然watch一般不这样用，这里用计算属性。当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的。

计算属性computed和侦听属性watch的区别：

计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。

侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。