vue中计算属性(computed)、methods和watched之间的区别
前言
本文主要给大家介绍了关于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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。