详述vue中computed和watch和methods的区别

一、computed和watch
computed计算属性顾名思义就是通过其他变量计算得来的另一个属性,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要它们的响应式数据没有发生改变，多次访问 这个数据 计算属性会立即返回之前的计算结果，而不必再次执行函数。

watch侦听器是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

二、computed和methods
computed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。
不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于methods ，只要发生重新渲染，methods 调用总会执行该函数。

当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性，我们最好使用 methods。

三、什么情况下分别使用computed、watch、methods
（1）数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods。
（2）尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。
（3）虽然计算属性在大多数情况下是非常适合的，但是在有些情况下我们需要自定义一个watcher，在数据变化时来执行异步操作，这时watch是非常有用的。