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

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

### 6.1.1 计算属性简介

在Vue.js的世界里，计算属性（Computed Properties）是响应式系统中一个非常核心且强大的特性，它允许我们声明式地描述一些依赖于其他响应式数据源的属性。与在模板中或方法里执行相同计算逻辑相比，计算属性基于它们的依赖进行缓存。只有当相关依赖发生改变时，计算属性才会重新求值，这极大地提升了应用的性能和效率。

#### 6.1.1.1 为什么需要计算属性

在Vue应用中，我们经常会遇到需要根据现有数据派生出一些新数据的情况。比如，在一个用户列表组件中，我们可能需要根据用户的年龄和性别来显示不同的问候语，或者计算用户的平均年龄。如果直接在模板中进行这些计算，不仅会让模板变得复杂难以维护，而且每次数据更新时都会重新执行这些计算，无论结果是否已经是最新的。

Vue的计算属性就是为了解决这类问题而设计的。它们提供了一种更优雅的方式来声明这些依赖响应式数据的派生值，并且Vue会确保当且仅当依赖项变化时，这些计算属性才会重新计算。

#### 6.1.1.2 计算属性的定义

在Vue组件中，计算属性通过组件的`computed`选项来定义。`computed`选项应该是一个对象，其中每个属性都是一个计算属性，属性名就是你在模板中引用的名称，而属性值则是一个函数，该函数会返回计算属性的值。

```javascript
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      // 当firstName或lastName变化时，fullName会重新计算
      return this.firstName + ' ' + this.lastName;
    }
  }
})
```

在上面的例子中，`fullName`就是一个计算属性，它依赖于`firstName`和`lastName`两个数据属性。在模板中，我们可以像绑定普通数据属性一样绑定`fullName`：

```html
<div id="app">
  <p>Full Name: {{ fullName }}</p>
</div>
```

当`firstName`或`lastName`的值发生变化时，Vue会自动调用`fullName`计算属性的getter函数，重新计算并更新其值，然后更新DOM。

#### 6.1.1.3 计算属性的特点

1. **缓存性**：计算属性是基于它们的响应式依赖进行缓存的。只要依赖没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不需要再次执行函数。

2. **懒执行**：计算属性只有在相关响应式数据发生变化时才重新计算，这意味着它们具有懒执行的特点。如果计算属性没有被访问，那么它的getter函数将不会被调用。

3. **只读性**（默认情况下）：虽然Vue允许你在计算属性内部执行复杂的逻辑，但计算属性默认是只读的。当你尝试修改一个计算属性的值时，Vue会警告你，因为这违背了计算属性的设计初衷。如果你需要基于某些数据产生可变的响应式数据，应该使用侦听器（watchers）或Vuex等状态管理库。

4. **调试友好**：在Vue开发者工具中，你可以很方便地看到计算属性的依赖关系以及它们的当前值，这有助于调试和性能优化。

#### 6.1.1.4 计算属性与方法的比较

虽然计算属性和方法都能实现相同的功能（即基于现有数据派生出新数据），但它们之间存在本质的区别：

- **计算属性是基于它们的响应式依赖进行缓存的**，而方法则不会。因此，对于需要频繁计算且计算成本较高的场景，使用计算属性可以显著提高性能。

- **计算属性是基于它们的响应式依赖自动更新的**，而方法则需要你手动调用。在模板中，计算属性可以直接通过其名称引用，而方法则需要像函数调用一样加上括号（`()`）。

- **计算属性默认是只读的**，而方法则没有这样的限制。虽然你可以在计算属性的getter函数中执行复杂的逻辑，但你不应该（也不能）直接修改它的返回值。如果你需要修改数据，应该使用侦听器或Vuex。

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

Vue的计算属性不仅限于简单的值计算，它们还可以包含更复杂的逻辑，比如条件语句、循环等。此外，Vue还允许你定义计算属性的setter函数，这在某些场景下非常有用，比如当你需要基于计算属性的值来更新其他数据时。

```javascript
computed: {
  reversedMessage: {
    // getter
    get: function () {
      return this.message.split('').reverse().join('');
    },
    // setter
    set: function (newValue) {
      this.message = newValue.split('').reverse().join('');
    }
  }
}
```

在上面的例子中，`reversedMessage`计算属性同时定义了getter和setter函数。当`reversedMessage`被访问时，会执行getter函数并返回原始消息`message`的倒序字符串；当尝试修改`reversedMessage`的值时，会执行setter函数，并将新值倒序后赋值给`message`。

#### 6.1.1.6 小结

计算属性是Vue.js中一个非常强大且实用的特性，它们提供了一种声明式地描述数据依赖关系的方式，并且基于依赖进行缓存和自动更新。通过合理使用计算属性，我们可以使Vue应用更加高效、易于维护和理解。在计算属性中，我们不仅可以执行简单的值计算，还可以包含更复杂的逻辑，甚至定义setter函数来响应值的改变。希望本章的内容能够帮助你更好地理解和使用Vue的计算属性。

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

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

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

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

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

Vue3技术解密

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

Vue面试指南

Vue源码完全解析

Vue原理与源码解析

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

移动端开发指南

VUE组件基础与实战