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

前言

本文主要给大家介绍了关于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能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# vue # computed # methods # computed属性 # computed计算属性 # Vue中的methods、computed计算属性和watch监听属性的使用和区别解析 # vue中计算属性computed和普通属性method的区别小结 # Vue3计算属性computed和监听属性watch区别解析 # Vue计算属性computed与方法methods的区别及说明 # 就会 # 是在 # 也会 # 其他的 # 只会 # 给大家 # 这篇文章 # 谢谢大家 # 时才 # 绑定 # 原始数据 # 是基于 # 有疑问 # watch # br # data # val

返回目录在线咨询

上一篇：PHP usort 自定义排序：优雅处理未匹配项并将其置于末尾
下一篇：宁波专业网站建设公司哪家好？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求