计算属性和 方法和 侦听器

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

方法一：用computed计算属性来实现（内置缓存机制）

当更改age的时候， fullName 函数不执行；
只有当更改 firstname或 lastname fullname才会执行

data(){
return{
  firstname:'hani',
  lastname:'wen',  
  age：‘12’
}
},
computed:{
  fullname:function(){
    return  this.firstname + ' ' +this.lastname
   }            
},

OK，在页面上就显示fullname的值了。（当我们用插值表达式，表达式的值会先在data中找，找不到再去计算属性computed中找）
效果：
hani wen

方法二：当然方法也可以完成这个效果：（无内置缓存）

当更改age的时候， fullName 函数执行， 这样就增加了代码冗余，浏览器运行性能降低；
当更改fristName的时候， fullName 函数仍执行。

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

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

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

效果：
hani wen
但是方法和计算属性有什么区别呢？
方法没有缓存机制，计算属性的性能更好。

方法三：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;
},                

效果：
hani wen
虽然监听的方法能够实现计算的结果，也有缓存的机制，但是看起来冗余。
这三种综合来看，涉及到计算，还是用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”，然后就会更新到该实例上的数据中，并在页面做出响应

计算属性和侦听器区别

计算属性的特点
当我们第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算属性结果缓存起来
后续我们在去使用计算属性的时候，如果计算属性使用的数据没有发生改变，那么就会直接读取缓存结果，不会重新计算
注意：每次计算的结果缓存的时候。都会重新创建一个便令保存结果
侦听器特点
当定义一个侦听器的时候，如果侦听器与data的属性同名，当属性的值发生改变的时候，侦听器就会被触发执行
注意：一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器执行

分析结果：

从上面的特点来说，我们可以得出结论：
1).计算属性的应用场景是计算的内容需要依赖多个属性的情况
侦听器的应用场景是计算的内容依赖一个属性的情况
2).计算属性缓存结果时每次都会重新创建变量
而侦听器是直接计算，不会创建变量保存结果

也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器
那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。
3).computed的结果是通过return返回的，而watch不需要return。
4).watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

补充：
watch只会监听数据的值是否发生改变，而不会监听地址的变化，如果需要监听引用类型的数据变化，需要深度监听：obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
在特殊的情况下(更改数组中的数据时，数组已经更改，但是视图没有更新)，watch无法监听数组的变化,更改数组必须要用splice()或者$set。
结论：

我们在计算开销比较大(计算次数多或者异步处理)的时候，会使用侦听器watch来得到计算结果。
而其他情况建议使用计算属性computed，因为缓存节省多次计算的性能。