7. 计算属性和侦听器

模板内的表达式过多会导致模板过于繁重，这时候可以采取计算属性。

<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('')
    }
  }
})

计算属性和一般的属性一样引用，看上去是一个方法，带有返回值，它和一般属性写在data中不同，写在【computed中】。
在这里你可以进行复杂的操作，最终返回需要的返回值，让页面变得更加干净，他等同于小程序的wxs。

计算属性的缓存

计算属性会处理data中的一些数据，然后返回处理后的结果，它看上去和专门定义一个方法处理一样，但是其实并不相同，因为它是有缓存的——

如上例中的this.message，只要这个message的值不改变，那么这个属性返回的永远是上一次计算结果的缓存值，大大节省的计算量。

但也就意味着，如果它处理的数据源并不是data中的可以被响应的数据，那么它将永不会更新数据，如：

computed: {
  now: function () {
    return Date.now()
  }
}

因为Date.now()的值的来源并不是data，所以它永远不会更新数据。

计算属性vs侦听属性

看上去和侦听属性（watch）差不多，同样是值的改变会触发，但是watch容易滥用，例如返回给页面的是data中的name和age两个属性，使用watch就必须对两者同时监听，参数越多，侦听的值就越多，而计算属性则不需要，书写一次就足够了。

计算属性的setter

计算属性不仅仅只有getter，也可以设置setter，绑定了model 的计算属性可以反过来改变数据源。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

侦听器

当数据变化时，需要执行异步操作或其他情况，可以使用侦听器来检测事件，从而进行下一步流程。

例如，检测到用户输入姓名后，通过watch将姓名ajax到后台，然后判断该用户名是否可用。明显这种情况不能使用计算属性。