计算属性,侦听属性,方法,对于同一个需求,可能三种方式都可以实现,但是,如果功能作用都一样,那为什么还要出现三种呢,细细考究,他们又又各自的职责,各司其职,会让代码更优美
计算属性与方法
比如实现一些购物价格总和
methods: {
getTotalMoney(){
let totalMoney = this.appleNum * thisapplePrice + this.bedNum*this.bedPrice
return totalMoney
}
},
computed: {
totalMoney: function() {
return this.appleNum * thisapplePrice + this.bedNum*this.bedPrice
}
}
看着计算属性和方法没什么区别,实际上差别大了
计算属性是基于他们的依赖进行缓存的,就是说,这一次计算过了,如果里面的变量没有发生任何改变的情况下,再次拿这个totalMoney显示的时候,不再重复计算,而方法是调用一次执行一次,没有缓存可以利用,简单的计算,两种方式看不出来区别,如果是比较复杂的,那有缓存和无缓存就不一样了
计算属性和侦听属性
他们有一个共同点就是,其中一个变量发生变化,能引起一些变化,这也是导致watch和computed使用的时候会混用的原因
watch擅长处理的情景是一个变量影响多个变量
eg:
watch:{
num: function(newValue,oldValue){
// 由于watch变化,触发执行函数体内的一些命令
}
}
computed删除处理,多个变量影响一个的,并且同时是声明式的
computed: {
fullName: function(){
return this.firstName+this.lastName
}
}
由于this.firstName或者this.lastName有变化,才会触发fullname变化
这是两者使用上的区别
大部分情况下使用computed比较多,但是watch有自己无可替代的作用
数据变化时执行异步或开销较大的操作时优先考虑watch
使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
vue官网讲的更详细些
https://cn.vuejs.org/v2/guide/computed.html