好资源导航 » 文章资讯 » vue中计算属性（computed）、methods和watched之间的区别

vue中计算属性（computed）、methods和watched之间的区别

2023-09-27 12:27:09 53

前言

本文主要给大家介绍了关于vue中计算属性（computed）、methods和watched之间的区别，分享出来供大家参考学习，下面来一起看看详细的介绍：

计算属性

和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。

Methods

methods是方法，只要调用它，函数就会执行。

相同：两者达到的效果是同样的。

不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

原始数据：{{msg}}
改变后的数据：{{changemsg}}
varvm=newVue({
el:"#example",
data:{
msg:"hello",
},
computed:{
changemsg:function(){
returnthis.msg.split("").reverse().join("");
},
}

computed属性 VSwatched属性

watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。

varvm=newVue({
el:'#demo',
data:{
firstName:'Foo',
lastName:'Bar',
fullName:'FooBar'
},
watch:{
firstName:function(val){
this.fullName=val+''+this.lastName
},
lastName:function(val){
this.fullName=this.firstName+''+val
}
}
})

computed属性：代码更简单。

varvm=newVue({
el:'#demo',
data:{
firstName:'Foo',
lastName:'Bar'
},
computed:{
fullName:function(){
returnthis.firstName+''+this.lastName
}
}
})

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者使用shell能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue中计算属性（computed）、methods和watched之间的区别

热门推荐

随机推荐