前言
本文主要给大家介绍了关于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 属性
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中的methods、computed计算属性和watch监听属性的使用和区别解析
vue中计算属性computed和普通属性method的区别小结
Vue3计算属性computed和监听属性watch区别解析
Vue计算属性computed与方法methods的区别及说明