008_重学Vue_计算属性

计算属性

计算属性是把已存在属性组装成新的属性，计算属性放在computed配置项中，computed也是一个对象。

<div id="app">{{fullName}}</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'allen',
    lastName: 'liang',
  },
  computed: {
    fullName() {
      get() {
        return this.firstName + '.' + this.lastName;
      },
      set(val) {
        const arr = val.split('.')
        this.firstName = arr[0]
        this.lastName = arr[1]
      },
    },
  },
})

Vue会把 fullName 加到 vm 实例上，因此可以直接在模板中直接使用。

1. 当有人访问fullName时get会被调用，并且返回fullName的值。
2. fullName 会被缓存，模板中多次用到fullName时，get只会调用一次。
3. 缓存更新时机：第一次调用时和依赖属性更新时会更新缓存。
4. fullName 中的 this 指向 vm，所以get可以访问data中的属性，get和set不能使用箭头函数，如果使用箭头函数 this 会指向window。所有vm管理的函数都只能使用普通函数。

计算属性简写

如果计算属性只读不写，则可以使用简写方式。简写时fullName不是一个对象，是一个函数，这个函数当get用。

  computed: {
    fullName: function () {
      return this.firstName + '.' + this.lastName
    },
  },
  
  继续简写  => 
  
  computed: {
    fullName() {
      return this.firstName + '.' + this.lastName
    },
  },

虽然简写成了一个函数，但实际上是调用了fullName获得返回值，放在了vm实例上，属性名为fullName。在模板中使用时后面不能加括号。