Vue-计算属性

作用

1. 简化模板中的逻辑，增加代码的可读性
2. 基于它们的响应式依赖进行缓存（相较于方法而言）如果有一个开销很大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter

computed: {
  now: function () {
    return Date.now()
  }
}

当有另一个计算属性依赖now并发生变化的时候这里的now才会重新求值
而如果now放在方法里，每当页面重新渲染都会再次执行该方法

计算属性的getter和setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
set当中将全名根据空格进行分割为数组，姓取数组中的第一个元素，名取最后一个。
当我们对fullName赋值的时候 setter会被调用，而访问fullName的时候getter会被调用。可以实现数据劫持和数据代理。

开发中会遇到的问题

当我们计算属性中用到了v-for中的值的时候，我们不能直接传递参数直接return，我们需要return 一个函数 return function（参数）{}把参数放到返回的函数中才可以使用，否则技术属性毕竟是个属性，和方法还是不同。