初学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