Vue中computed(计算属性)、methods、watch的区别

初学vue，阅读api后，发现Vue提供了多种逻辑处理的方法，单纯的方法methods，computed(计算属性)以及watch等，充分理解这三者的区别，才能写出更加健壮的Vue代码。

1、methods，computed的区别

先上例子：

var vm = new Vue({
 el: '#app',
 data: {
    msg: 'nihao',
    text: 'byebye'
 },
 computed: {
    getmsg: function () {
       return this.msg
    }
 },
 methods:{
    gettext:function () {
       return this.msg
    }
}  
})
<p>msg：{{getmsg}}</p>  
<p>text：{{gettext()}}</p> 
在这个例子中，只要msg值发生变化，getmsg方法就会触发，而text的值发生变化，只要没有调用gettext方法，显示的值不会动态改变。就是说，methods中就是普通的方法，通过调用执行，computed中的方法会监听自己的依赖，依赖发生变化方法会自动执行。

2、computed与watch区别

继续看例子

var vm = new Vue({
 el: '#app',
 data: {
    msg: 'nihao',
    text: 'byebye'
 },
 computed: {
    getmsg: function () {
       return this.msg
    }
 },
 watch:{
    text:function () {
       this.msg="dajiahao"
    }
}  
})
在这个例子中，当msg发生变化，getmsg会自动执行，当text发生变化，watch里相应方法会执行。可以看到watch可以指定监听哪个值，当这个值发生变化时，去进行相应操作。

 

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官网上这个例子: 侦听器

         原创：https://blog.csdn.net/baidu_33295233/article/details/79571865