vue中methods和watched有什么区别

这篇文章给大家介绍vue中methods和watched有什么区别，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站设计、做网站、电商网站开发、微信营销、系统平台开发。

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

关于vue中methods和watched有什么区别就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。