Vue中computed与methods、watch的区别

由于电脑没在身边，就用手机写的，所以没有放代码片段，所以还请见谅！

首先computed做为Vue的计算属性，有以下几个特点：

1、Vue 之所以推荐计算方法使用计算属性，就是因为computed是有缓存的

2、结果是需要return出去的

3、computed是可以使用未被data定义的属性

4、computed是不能进行异步操作的

结合以上特点，computed与methods、watch的区别也就呼之欲出了。

先说methods的区别，乍一看好像methods方法里也可以写一些简单的计算啊，没错，是可以写在methods方法里，但是仅限与一些简单的计算，如果是性能消耗比较大的计算，你放到了methods里或者你直接放到dom 里进行计算，理论上是没问题的，但是你要考虑几个问题，后期维护成本和性能优化，因为这两种方式都没有缓存所以每次加载和刷新都要重新计算一遍，这是非常不利的。

再来看watch，如果你的数据是需要延时得到的，这时候肯定会用到定时器，把定时器放到computed 里，表面上看好像是可以的，也没有报错，但是你会发现计算的属性在页面上看不到了。这是因为computed的结果是需要return出来的，return放在定时器外，你返回的会是你定时器的ID，return放到定时器中，因为定时器是windows的一个方法，这时候你的返回值是返回给了windows ，而不是Vue 。而watch就不存在这样的问题，因为watch 不需要使用return去返回值，这就是为什么说watch能做的事computed不一定能做。

总结：

methods没有缓存，只用来写方法就可以了，计算的事交给computed去做。那么既然watch也能做computed的事，什么时候用watch，什么时候用computed呢？这里有一个方法去判断，如果一个属性的值是被多个属性所影响的，那就用computer ！比如求和，如果一个属性是可以去影响多个属性的，那就用watch ！比如搜索。