计算属性(二)
模板中绑定的数据依赖于data中的数据,data中的数据更新会时模板相应更新。
计算属性缓存 vs 方法
这小节说的是计算属性与methods的区别,文档开头说了methods同样可以完成计算的效果,两种方法最终可以完成的结果时相同的。
不同点:vue的特点之一是复用性,使得小路提高,methods的方法每一次触发都有需要重新计算、渲染,而计算属性只有在依赖的数据发生更新时才会再次计算,否则会缓存,这样做大大的提高了效率,依赖的数据必须在data中才能是响应式的。
但是有时候,当我们不需要缓存时,可以使用方法替代。
计算属性 vs 侦听属性
说的是watch, watch可以监听数据变化,并在数据变化的时候“做一点其他的事情”
原文中给出了这算代码:
<div id="demo">{{ fullName }}</div>
使用watch的方法:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
使用计算属性的方法:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
文档中指出,使用watch的代码片段是重复的。使用计算属性的代码并没有重复,是更好的。并建议我们不要滥用watch。
我的理解是:watch 的作用主要是监听数据变化,在数据变化是做一点“其他的事情”,而非像上面代码一样对数据进行再加工,对数据进行再加工应该交给更专业的计算属性来完成。