Vue 中methods，computed，watch的区别

methods

methods中定义的都是具体的方法，根据一些触发条件，调用一次，重新执行一次。

比如说点击事件

computed

• computed是vue中独有的一个计算属性，它是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
• 就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。
• 计算属性默认只有getter，可以在需要的时候自己设定setter
• setter默认有一个参数(用不到也可以不写)

比如说购物车总价总价总量计算，用计算属性实现会变得非常容易。

vue中input的值双向绑定的数据必须在data中定义，但是由于使用了vuex，数据全部定义在vuex中，所以采用计算属性的get和set定义双向绑定的值。

总结：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods。

watch

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

商品的多重筛选可以用到这个属性。

computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性，而不是命令是的watch回调。

尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。

在大多数情况下computed属性都能够代替watch属性使用，但是在有些情况下我们需要自定义一个watcher，在数据变化时来执行异步操作，这时watch是非常有用的。