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

网友投稿 253 2023-04-25


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

前言

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

计算属性

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

Methods

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

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

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

原始数据:{{msg}}

改变后的数据:{{changemsg}}

var vm=new Vue({

el:"#example",

data:{

msg:"hello",

},

computed:{

changemsg:function(){

return this.msg.split("").reverse().join("");

},

}

computed属性  VS watched 属性

watchttp://hed属性:代码更易于理解,它指定监测的值是谁,然后相应的改变其他的值。

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar',

fullName: 'Foo Bar'

},

watch: {

firstName: function (val) {

this.fullName = val + ' ' + this.lastName

},

lastName: function (val) {

this.fullName = this.firstName + ' ' + val

}

}

})

computed属性:代码更简单。

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar'

},

computed: {

fullName: function () {

return this.firstName + ' ' + this.lastName

}

}

})

总GbbeONTP结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java 数据结构之栈与队列
下一篇:Spring Boot启动时调用自己的非web逻辑
相关文章

 发表评论

暂时没有评论,来抢沙发吧~