模板内的表达式过多会导致模板过于繁重，这时候可以采取计算属性。
<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到后台，然后判断该用户名是否可用。明显这种情况不能使用计算属性。
