我是怎么学会vue的09：计算属性（computed属性）

data中的数据，可以通过插值语法直接显示到页面上，但有时需要先处理一下（比如把多个数据合并），再显示到页面。

此时就会用到计算属性（vue实例的computed属性）。

用法

HTML：在模板里面指定属性名

{{fullName}}

JS：在computed属性里面，添加方法。

const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })

案例

显示图书总价

  
总价格: {{totalPrice}}
  

setter和getter

get方法

为什么计算属性写成函数，使用的时候却当一个普通属性来使用，不用加小括号呢？

因为我们平时使用的，是computed的简写形式，比如上面【用法】这个案例，如果完整写的话，fullName属性的值不是函数，而是对象，对象里面包含set方法和get方法，如下所示：

computed: {
      fullName: {
        set: function () {
        },
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
}

使用计算属性，其实是调用get方法，来输出return的内容。

计算属性通常是只读属性，因为计算属性通常只实现get方法，不需要实现set方法。所以set方法一般会删除掉：

computed: {
      fullName: {
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
}

既然只实现get方法，每次都写get挺麻烦的，所以我们通常会简写成下面的形式：

computed: {
      fullName: function () {
          return this.firstName + ' ' + this.lastName
      }
}

这个function，对应的就是get方法。所以fullName不需要加小括号，因为他是属性，不是方法。之所以看着像方法，只是因为简写了。

set方法（了解，通常不需要实现set方法）

要实现set方法，需要给set方法传递一个参数：

set:function(newValue){
    console.log(newValue)
}

我们打开浏览器的调试窗口，输入app.fullName='yao kai'，则值yao kai会被传递给newValue，console的结果是yao kai。

拿到newValue之后，我们想把它保存给data，该如何操作呢：

set: function(newValue) {
          console.log(newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
}

计算属性和methods的对比

计算属性有缓存，methods没有缓存。