计算属性
模板内的表达式非常便利，但是在模板中放入太多的逻辑会让模板过重切难以维护。对于任何复杂逻辑都应该使用计算属性。
<p>{{ reverseMsg }}</>
var vm = new Vue({
el: '#example',
data: {
message: 'hello'
},
computed: {
reverseMsg: function() {
return this.message
}
}
})
这里声明一个计算属性reverseMsg。我们提供的函数将作用属性vm.reverseMsg的getter函数。
我们可以在表达式中调用方法来达到和计算属性相同的作用。但是计算属性是基于它们的依赖缓存的。只有在相关依赖改变的时候才会重新求值。这就意味着只要message没有改变，多次访问reverseMsg还是返回同样的值，而不是执行函数。
computed: {
now: function() {
return Date.now()
}
}
如上是不会发生改变的，应该不是响应式依赖。
- 计算属性的setter
计算属性默认只有getter，不过在需要时也可以提供一个setter。
computed: {
fullName: {
get: function() {},
set: function() {
}
}
}
侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。