计算属性

一.定义

vue的一个option，用来计算缓存一些计算项。

let app = new Vue({
  el:"#app",
  data:{
    firstName:"Kobe",
    lastName:"Bryant"
  },
  computed: {
    //计算属性
    fullName(){
      return this.firstName+" "+this.lastName
    }
}
})

二、计算属性的set和get函数

tips:计算属性，fullName后面无（），methods方法示例调用的时候需要加（）。

<div id="app">
{{fullName}} 
</div>
-----------------------------------------
let app = new Vue({
  el:"#app",
  data:{
    firstName:"Kobe",
    lastName:"Bryant"
  },
  computed: {
    /*计算属性
    fullName(){
      return this.firstName+" "+this.lastName
    }
    */
    fullName:{
      //计算属性一般是没有set方法，一般称作读属性
      set(newValue){
        let names = newValue.split(" ")
        this.firstName=names[0]
        this.lastName=names[1]
      },
      get(){
        return this.firstName+" "+this.lastName
      }
    }
  }
})

当然源码中set和get不是这样的，但是就是这个道理。

三、computed和methods的对比

初学vue的都会发现computed和methods的写法都差不多，也并没有起到简化代码的作用，那么为啥会多一个computed的属性呢。
computed计算出来的属性会进行缓存，下次调用改属性就直接调用缓存的值。methods里面的方法重新调用同一个方法，调用一次执行一次。所以合理的使用计算属性，可以提高程序的性能。