Vue中methods、computed和watch使用场景和方法

1、watch和computed都是以Vue的依赖追踪机制为基础，它们都试图处理这样一件事情：

当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2、methods :

methods用来定义函数，它需要手动调用才能执行，需要像”fn()”这样去调用它（假设函数为fn）

3、computed:

computed是计算属性，事实上和data对象里的数据属性是同一类的（使用上），在取值的时候，用this.totalPrice去取用，就和取data一样（不要当成函数调用！！）

computed: {
    totalPrice() {
        let totalPri = 0
        this.list.forEach((v, i) => {
            totalPri += v.price
        })
        return totalPri
    },
    averagePrice() {
        let averagePri = 0
        averagePri = this.totalPrice / this.list.length
        return averagePri
    },
},

4、watch和computed各自处理的数据关系场景不同 :

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

5、为什么不用methods中的函数取值，而是用computed计算属性取值

computed 和 methods相比，computed有缓存，性能开销小，何谓computed缓存呢？

在改变数值（任意跟computed中不相关的数据）时，整个应用会重新渲染，如果使用的是methods中的函数方法，则这个方法会被重复调用，浪费性能。

而computed不会重新计算，只有依赖的值有变化时，才会去重新计算，这就是computed的缓存