6.2 计算属性和侦听器 -TypeScript和Vue从入门到精通(二)

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

### 6.2 计算属性和侦听器

在Vue.js框架中，计算属性（Computed Properties）和侦听器（Watchers）是两种强大的特性，它们极大地增强了组件的响应式能力和灵活性。这些特性在结合TypeScript使用时，不仅能够提高开发效率，还能确保类型安全，使代码更加健壮和易于维护。本章将深入探讨Vue与TypeScript环境下计算属性和侦听器的使用方法、最佳实践以及它们如何协同工作来优化你的应用。

#### 6.2.1 计算属性基础

计算属性是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，计算属性才会重新求值。这与在模板或计算属性内部使用方法（methods）相比，有着显著的性能优势，因为方法会在每次渲染时都会重新执行，而计算属性则只会根据依赖的变化而更新。

**TypeScript中的计算属性定义**

在TypeScript中定义Vue的计算属性时，你可以直接在组件的`computed`选项中声明它们，并使用箭头函数或常规函数来定义其逻辑。然而，需要注意的是，当使用箭头函数时，`this`的指向不会自动绑定到Vue实例，因此通常建议使用常规函数来定义计算属性。

```typescript
<template>
  <div>
    <p>Reversed Message: {{ reversedMessage }}</p>
  </div>
</template>

export default Vue.extend({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {
    // 使用常规函数确保this指向Vue实例
    reversedMessage(): string {
      return this.message.split('').reverse().join('');
    }
    // 注意：虽然可以使用箭头函数，但为保持this的正确性，不推荐
    // reversedMessage: (): string => this.message.split('').reverse().join('') // 错误示例
  }
});
</script>
```

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

**Getter与Setter**

计算属性不仅可以定义getter来获取值，还可以定义setter来监听值的变化。这在处理复杂逻辑或需要基于新值执行某些操作时非常有用。

```typescript
computed: {
  fullName: {
    // getter
    get(): string {
      return `${this.firstName} ${this.lastName}`;
    },
    // setter
    set(value: string) {
      const names = value.split(' ');
      this.firstName = names[0] || '';
      this.lastName = names[1] || '';
    }
  }
}
```

**类型推断与显式类型定义**

TypeScript的强大之处在于其类型系统。在计算属性中，你可以利用类型推断自动获得返回值的类型，但也可以显式地定义返回类型以增强代码的可读性和健壮性。

```typescript
computed: {
  // 使用类型推断
  reversedMessage(): string { ... },
  // 显式定义类型
  explicitTypeComputed(): number {
    return this.someNumber * 2; // 假设someNumber是data中的一个数字
  }
}
```

#### 6.2.3 侦听器基础

侦听器允许你执行异步操作或开销较大的操作，而不需要频繁地更新DOM。它们会对Vue实例上数据的变化作出响应，并执行你提供的回调函数。

**TypeScript中的侦听器定义**

在TypeScript中，侦听器通过在组件的`watch`选项中定义来实现。每个侦听器都是一个函数，它接收两个参数：新值和旧值。

```typescript
<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      question: ''
    };
  },
  watch: {
    // 侦听question的变化
    question(newVal: string, oldVal: string) {
      // 执行一些操作，比如发送请求
      console.log(`Question changed from ${oldVal} to ${newVal}`);
    }
  }
});
</script>
```

#### 6.2.4 侦听器的高级用法

**深度侦听**

默认情况下，侦听器不会侦听对象内部值的变化。如果你需要侦听一个对象的深层次变化，可以将侦听器的第三个参数设置为`true`来启用深度侦听。

```typescript
watch: {
  someObject: {
    handler(newVal: SomeType, oldVal: SomeType) {
      // 处理对象变化
    },
    deep: true // 启用深度侦听
  }
}
```

**即时侦听**

在某些情况下，你可能希望在组件创建之初就立即执行侦听器中的代码。虽然Vue不直接提供这样的选项，但你可以通过`immediate: true`来让侦听器在侦听属性第一次绑定时立即执行。

```typescript
watch: {
  someProp: {
    handler(newVal: any, oldVal: any) {
      // 立即执行的操作
    },
    immediate: true // 组件创建时立即执行
  }
}
```

#### 6.2.5 计算属性与侦听器的选择

虽然计算属性和侦听器都能响应数据的变化，但它们的使用场景和性能特点有所不同。

- **计算属性**：适用于需要根据响应式数据派生出新数据的情况。它们基于依赖关系进行缓存，只有当依赖变化时才会重新计算，因此性能更优。
- **侦听器**：适用于需要执行异步操作或开销较大的操作时。侦听器能够侦听数据的变化并执行回调函数，但不提供缓存机制。

在Vue与TypeScript的实践中，合理选择计算属性和侦听器，可以显著提高应用的性能和可维护性。

#### 6.2.6 最佳实践

1. **优先考虑计算属性**：在大多数情况下，优先使用计算属性来处理数据派生，因为它们提供了更好的性能和更优的语法。
2. **合理使用侦听器**：当需要进行异步操作或执行复杂的逻辑，且这些操作不依赖于DOM更新时，使用侦听器。
3. **避免在侦听器中修改侦听的数据**：这可能导致无限循环，因为侦听的数据变化又会触发侦听器。
4. **利用TypeScript的类型系统**：通过显式定义计算属性和侦听器的返回类型及参数类型，提高代码的可读性和健壮性。

### 结语

计算属性和侦听器是Vue.js中两个非常重要的特性，它们为开发者提供了强大的数据响应和处理能力。在TypeScript环境下，通过充分利用TypeScript的类型系统，我们可以编写出更加健壮、易于维护的Vue组件。希望本章内容能够帮助你更好地理解和使用Vue中的计算属性和侦听器，进而提升你的开发效率和代码质量。

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

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

Vue原理与源码解析

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

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

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

Vue3技术解密

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

VUE组件基础与实战

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

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

Vue面试指南

移动端开发指南