13 计算属性的使用

在上一章中，我们探讨了如何在 Vue 中进行数据绑定，尤其是如何绑定 HTML 属性。在这一章中，我们将深入探讨计算属性，它是 Vue 中一个非常强大的功能，它允许我们基于现有的数据状态来计算和返回新数据。

什么是计算属性？

计算属性是基于 Vue 实例的 data 中的一个或多个属性的计算值。与直接在模板中使用表达式不同，计算属性是有缓存的，只在其依赖的属性发生变化时重新计算。这使得它们在性能和可读性上都优于复杂的模板表达式。

计算属性的基本定义

计算属性可以在 Vue 的 computed 选项中定义。一个基本的计算属性例子如下：

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

在这个例子中，fullName 就是一个计算属性，它连接了 firstName 和 lastName。在模板中，我们可以简单地使用 {{ fullName }} 来显示全名，而无需在模板中进行复杂的拼接。

计算属性的优点

1. 性能优化：计算属性会缓存，直到它们依赖的 data 发生变化。这样在不必要时不会重复计算。

2. 提高可读性：通过将逻辑封装在计算属性中，模板变得更加干净和易读。

3. 避免重复代码：可以在多个地方引用计算属性，而无需重复相同的逻辑。

使用计算属性进行示例

假设我们要创建一个简单的用户信息表单，用户可以输入他们的名字和姓氏，我们希望实时显示他们的全名。

HTML 结构

<div id="app">
  <div>
    <label>First Name:</label>
    <input v-model="firstName">
  </div>
  <div>
    <label>Last Name:</label>
    <input v-model="lastName">
  </div>
  <div>
    <h2>Full Name: {{ fullName }}</h2>
  </div>
</div>

Vue 实例

new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  },
  computed: {
    fullName: function() {
      return `${this.firstName} ${this.lastName}`.trim();
    }
  }
});

在这个例子中，用户输入他们的名字和姓氏，fullName 计算属性会实时更新，并在页面上显示完整的名字。

计算属性的使用注意事项

• 计算属性应当用于逻辑相对简单的计算，避免复杂的业务逻辑。如果计算逻辑过于复杂，考虑将其封装成方法。

• 若一个计算属性不依赖于 Vue 实例的状态或数据，建议改用方法，这样可以避免不必要的计算。

• 计算属性在模板中的引用会自动更新。如果其依赖的 data 发生变化，计算属性值会自动重新计算，这就是 Vue 响应式的强大之处。

接下来，我们将在下一章中讨论侦听器的原理与应用。请继续关注，我们将探讨如何通过侦听器更精细地控制数据变化的反应。