Vue_计算属性，方法和侦听器-蒲公英云

Vue_计算属性，方法和侦听器

- 日理万妓 2022-05-22 13:22 347阅读 0赞

一.计算属性：
我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值，那我们就在computed属性中去定义计算的方法：
eg：
我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名:
方法一：用computed计算属性来实现

data(){
return{
  firstname:'hani',
  lastname:'wen',  
}
},
computed:{
  fullname:function(){ 
    return  this.firstname + ' ' +this.lastname
   }            
},

OK，在页面上就显示fullname的值了。（当我们用插值表达式，表达式的值会先在data中找，找不到再去计算属性computed中找）
效果：
这里写图片描述
方法二：当然方法也可以完成这个效果：

methods:{
fullname:function(){ 
 return  this.firstname + ' ' +this.lastname
}
}

在页面上调用方法：{ {function()}}

<h1>{ { fullname()}}<h1>

效果：
这里写图片描述
但是方法和计算属性有什么区别呢？
方法没有缓存机制，计算属性的性能更好。

方法三：watch监听fristname 和 lastname 来实现
先初始化数据：

data(){
return{
  firstname:'hani',
  lastname:'wen',
  fullname:'hani wen'
}
}

监听fristname 和lastname的变化，一旦有变化则触发：

watch:{
    firstname:function(){ 
    this.fullname =this.firstname +' '+this.lastname;
 },
    lastname:function(){ 
    this.fullname = this.firstname + " "+this.lastname;
},

效果：
这里写图片描述
虽然监听的方法能够实现计算的结果，也有缓存的机制，但是看起来冗余。
这三种综合来看，涉及到计算，还是用computed比较好。

二.计算属性的setter和getter
在computed中可以将fullname 定义成一个对象，在对象中定义get 和set 的方法。

computed:{
    fullname:{
    get:function(){ 
       return  this.firstname + ' ' +this.lastname
 },
     set:function(value){ 
     console.log(value);
     var arr = value.split(' ');
     this.firstname = arr[0];
     this.lastname = arr[1];
  }
 }
},