6.1 计算属性-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 6.1 计算属性

在Vue.js的世界里，计算属性（Computed Properties）是一个极其重要的概念，它允许组件基于它们的响应式依赖进行缓存的派生。这意味着只有当相关依赖发生改变时，计算属性才会重新求值。这种机制不仅优化了性能，还使得代码更加简洁和易于维护。本章节将深入探讨Vue.js中的计算属性，包括其基本用法、高级技巧以及在实际项目中的应用场景。

#### 6.1.1 计算属性的基本概念

在Vue中，计算属性是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，才会重新计算。这与methods（方法）不同，methods在每次重新渲染时都会被调用，无论其依赖项是否已更改。因此，对于任何需要基于组件数据动态变化的复杂逻辑，计算属性都是更好的选择。

计算属性在组件的`computed`选项内定义，它们可以像组件的数据属性一样被访问，但实际上是基于组件其他数据属性计算得出的值。

```javascript
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})
```

在上述示例中，`fullName`是一个计算属性，它依赖于`firstName`和`lastName`两个数据属性。只要这两个数据属性中的任何一个发生变化，`fullName`就会自动更新。

#### 6.1.2 计算属性的优势

1. **缓存**：计算属性是基于它们的响应式依赖进行缓存的。这意味着只要依赖没有改变，多次访问计算属性会立即返回之前的计算结果，而不会执行计算逻辑。这对于提高大型应用的性能至关重要。

2. **依赖追踪**：Vue会自动追踪计算属性依赖的响应式属性。当这些依赖发生变化时，计算属性会自动重新计算。这种依赖追踪机制是Vue响应式系统的核心之一。

3. **声明式描述**：通过计算属性，我们可以以一种声明式的方式来描述组件的状态。这使得代码更加清晰、易于理解和维护。

4. **减少模板中的复杂逻辑**：在模板中直接嵌入复杂逻辑不仅难以阅读和维护，还可能导致性能问题。通过将复杂逻辑封装在计算属性中，可以使模板保持简洁和高效。

#### 6.1.3 计算属性的高级用法

##### 6.1.3.1 计算属性的getter与setter

虽然大多数情况下我们只需要计算属性的getter函数，但Vue也允许我们为计算属性提供setter函数。当尝试修改一个计算属性时，会调用setter函数，并传入新的值。

```javascript
computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}
```

在上述示例中，当尝试修改`fullName`时，实际上是在修改`firstName`和`lastName`。这种模式在处理如用户全名等复合字段时非常有用。

##### 6.1.3.2 计算属性与方法的区别

虽然计算属性和方法在某些方面看起来很像，但它们之间存在本质的区别：

- **缓存**：计算属性是基于其依赖进行缓存的，而方法则会在每次调用时重新执行。
- **调用方式**：在模板中，计算属性可以直接作为表达式的一部分使用，而方法则必须像函数那样被调用。
- **用途**：计算属性适用于那些需要根据响应式数据动态变化的值，而方法则更适合于执行复杂逻辑或操作数据。

#### 6.1.4 计算属性在实际项目中的应用场景

##### 6.1.4.1 格式化数据

在开发过程中，经常需要对从后端获取的原始数据进行格式化处理。例如，将时间戳转换为易读的日期格式、将数字格式化为货币格式等。使用计算属性可以很方便地实现这些需求。

```javascript
computed: {
  formattedDate() {
    return new Date(this.timestamp).toLocaleDateString();
  }
}
```

##### 6.1.4.2 复杂的逻辑计算

在一些复杂的应用场景中，可能需要基于多个数据属性进行复杂的逻辑计算。例如，计算购物车中的总价、计算用户的总积分等。这些场景都是计算属性的用武之地。

```javascript
computed: {
  totalPrice() {
    return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
  }
}
```

##### 6.1.4.3 监听数据变化并做出响应

虽然计算属性主要用于声明式地描述依赖关系，但在某些情况下，我们也可以利用计算属性的setter来监听数据变化并做出响应。例如，当某个计算属性的值发生变化时，可以执行一些副作用操作（如发送请求、更新其他数据等）。

#### 6.1.5 小结

计算属性是Vue.js中一个非常强大的功能，它允许我们以一种声明式的方式来描述组件的响应式状态。通过利用计算属性的缓存和依赖追踪机制，我们可以优化应用的性能，并使代码更加简洁和易于维护。在实际项目中，计算属性有着广泛的应用场景，包括格式化数据、复杂的逻辑计算以及监听数据变化等。掌握计算属性的用法和技巧，将有助于我们更高效地开发Vue.js应用。

该分类下的相关小册推荐：

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(三)

Vue源码完全解析

TypeScript和Vue从入门到精通(三)

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(一)

vue项目构建基础入门与实战

Vue3技术解密

TypeScript和Vue从入门到精通(五)

移动端开发指南