Vue.js前端开发笔记--Vue.js基础特性(2) 之计算属性

计算属性

我们展示的数据汪汪需要经过一定的处理，除了在模板中使用绑定表达式或者使用过滤器外，Vue.js还提供了计算属性，避免在模板中加入过多的业务逻辑，保证了模板结构的清晰和可维护性。

在Vue.js中，所有的计算属性都定义在computed 中
基础示例：

<span>{{fullName}}</span>

var vm = new Vue({
  el: '#app',
  data:{
    firstName: 'San',
    lastName: 'Zhang'
  },
  computed: {
    fullName: function(){
      return this.firstName + ' ' + this.lastName;
    }
  }
});

这里我们声明了一个计算属性fullName。我们提供的函数将用作属性 vm.fullName的 getter 函数。修改firstName或者lastName的值，fullName的值也会随之改变。

计算属性的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]
    }
  }
}

当我们修改fullName的值时，firstName 和lastName的值也会随之改变。

计算属性和调用方法的区别

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 firstName、lastName 还没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每次访问fullName，调用方法将总会再次执行函数。
如果我们不需要缓存，可以用方法代替计算属性。

参考：Vue.js中文官网—计算属性