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




Logo

前往低代码交流专区

更多推荐