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

一.计算属性：
我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值，那我们就在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];
  }
 }
},

在调用上get没有改变。set方法，在控制台上输入：app.fullname="dell Lee"，然后就会更新到该实例上的数据中，并在页面做出响应

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

猜你喜欢