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

2019-11-19 15:58:24

字体：大中小

来源：转载

供稿：网友

前言

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

计算属性

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

Methods

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

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

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

<p>原始数据：{{msg}}</p> <p>改变后的数据：{{changemsg}}</p> var vm=new Vue({ <span style="white-space:pre"> </span>el:"#example",  data:{  <span style="white-space:pre"> </span>msg:"hello", <span style="white-space:pre"> </span>}, <span style="white-space:pre"> </span>computed:{   changemsg:function(){   return this.msg.split("").reverse().join("");  }, }

computed属性 VS watched 属性

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

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 } }})

总结

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

上一篇：AngularJS点击添加样式、点击变色设置的实例代码

下一篇：angular2+node.js express打包部署的实战