计算属性，侦听属性，方法，对于同一个需求，可能三种方式都可以实现，但是，如果功能作用都一样，那为什么还要出现三种呢，细细考究，他们又又各自的职责，各司其职，会让代码更优美
计算属性与方法
比如实现一些购物价格总和
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
网友评论