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'},...
·
初学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可以指定监听哪个值,当这个值发生变化时,去进行相应操作。
更多推荐
已为社区贡献1条内容
所有评论(0)