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可以指定监听哪个值，当这个值发生变化时，去进行相应操作。