computed、watch、methods区别

计算属性，侦听属性，方法，对于同一个需求，可能三种方式都可以实现，但是，如果功能作用都一样，那为什么还要出现三种呢，细细考究，他们又又各自的职责，各司其职，会让代码更优美

计算属性与方法

比如实现一些购物价格总和

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