Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

1 . 相信有很多人都认为computed能实现的功能methods一样能实现, 对吧?其实确实是这样, computed能现实的methods确实能是现实,但是显示的过程可以有很大的差别的, 我就大家在这举一个列子来说明:
假设现象一下购物车结算场景，用户选中商品的总金额是根据商品数量、选中商品种类数 和商品单价来变化的。
我们直接这样就可以算出选中金额的总数:

computed:{
    totalPrice(){
        let totalPrice = 0
        this.listOfArticles.forEach(food => {
            totalPrice += food.price + food.count
        })
        return totalPrice // 我们只需要在模板中使用 {{ totalPrice }} 就可以表示选中的商品价格
    }
}

看到这里, 也许很多同学会有疑问, 使用methdos定义一个totalPrice方法和这个差不多啊?
其实有本质的区别, computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。在本例子中也就是意味着只要价格和数量发生变化, totalPrice方法才会执行, 而只要价格和数量没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。

看到这里有同学又会想 我们为什么需要缓存？
假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A 。如果没有缓存，我们将不可避免的多次执行A 的 getter！
如果你不希望有缓存，请用方法来替代。

2 . 说了这么多，下面先对watch和computed:
首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
但watch和computed也有明显不同的地方：
watch和computed各自处理的数据关系场景不同
(1).watch擅长处理的场景：一个数据影响多个数据
(2).computed擅长处理的场景：一个数据受多个数据影响

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
例如Vue官网上这个例子: 侦听器