VUE大神的成长之路--计算属性

模板中放入太多的逻辑会让模板过重且难以维护,所以，对于任何复杂的逻辑，你都应当使用计算属性
基础例子:

原始值：{{ a }}

计算之后的值：{{ b }}

var vm = new Vue({
el: '#example',
data: function(){
return {
a: "hello world"
}
},
computed: {
b: function(){
return this.a.split('').reverse().join('')
}
}
})

上面的例子我们可以通过表达式中的methods来达到

原始值：{{ a }}

计算之后的值：{{ b() }}

var vm = new Vue({
el: '#example',
data: function(){
return {
a: "hello world"
}
},
methods: {
b: function(){
return this.a.split('').reverse().join('')
}
}
})

computed VS methods
两种方式的计算结果是相同的，不同的是：计算属性是基于他们的依赖进行缓存的，只有在他的相关依赖改变时才会重新求值，这就意味着只要依赖没有变化，多次访问时候只会立即返回之前的计算结果，而不必再次执行函数
相比而言，只要发生了重新渲染，就总会调用method函数
对于有依赖的属性，请尽量使用computed，来提高渲染性能

computed VS watched
尽量使用computed属性而不是命令式的使用watch回调