【千锋】最全最新Vue、Vuejs教程，从入门到精通Vue2.0+Vue3.0前

当我们需要根据一些已有的数据进行计算，生成新的数据时，Vue.js的计算属性就非常有用。计算属性是基于它们的依赖进行缓存的，也就是说只有在相关依赖发生变化时，才会重新计算。

1. 定义计算属性：在Vue组件的`computed`选项中定义计算属性。例如：

```javascript

computed: {

 fullName() {

  return this.firstName + ' ' + this.lastName;

 }

}

```

这里的`fullName`是计算属性的名称，函数返回了基于`firstName`和`lastName`计算出的完整的姓名。

2. 计算属性的使用：计算属性可以像普通的数据属性一样在模板中使用。例如：

```html

<h1>{{ fullName }}</h1>

```

当`firstName`或`lastName`发生变化时，`fullName`会自动更新。

3. 计算属性的缓存：Vue会缓存计算属性的结果，在它的依赖没有变化时直接返回缓存的值，而不会重新计算。这可以提高性能，特别是当计算属性的计算成本较高时非常有用。

4. 计算属性与方法的对比：与使用方法调用相比，计算属性具有缓存和依赖追踪的特性，这使得它们更适合处理复杂的逻辑计算。而对于简单的计算，方法调用可能更加合适。

5. 计算属性的Setter：默认情况下，计算属性是只读的，无法进行赋值操作。但是，我们可以使用计算属性的setter方法定义计算属性的值。例如：

```javascript

computed: {

 fullName: {

  get() {

   return this.firstName + ' ' + this.lastName;

  },

  set(value) {

   const names = value.split(' ');

   this.firstName = names[0];

   this.lastName = names[1];

  }

 }

}

```

通过定义计算属性的`get()`和`set()`方法，我们可以对计算属性进行读取和设置操作。

计算属性是Vue.js非常强大和灵活的特性之一，可以帮助我们简化对数据的处理和转换。通过合理地使用计算属性，我们可以使代码更易于理解、维护和重用。