计算属性
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
缓存的重要性：当我们有一个性能开销很大的计算属性A时，他需要遍历一个巨大的数组并做大量计算。当有其他计算属性也依赖A时，如果不缓存A，我们将不可避免的多次执行 A 的 getter方法，这样十分耗费性能。
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
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侦听器是最有用的。当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。
watch: {
city：{
//如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性
immediate: true,
//普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
deep: true,
handler(newVal, oldVal) {
// do somethings
},
},
// 当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性
'city.name': {
handler(newName, oldName) {
// ...
},
}
}
计算属性 vs 侦听器
watch：一个值变化了，我要做那些事，适合一个值影响多个值的情景。
computed：一个值由其他的值得来的，这些值变了我也要变，适合多个值影响一个值的场景。
计算属性有缓存性，计算所得的值没有变化不会重复执行，监听器提供更通用的方法，适合执行异步操作或者开销大的情况。
一个数据需要经过复杂计算就用 computed。一个数据需要被监听并且对数据做一些操作就使用 watch。
