9.1.1 生命周期方法 -TypeScript和Vue从入门到精通(三)

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

### 9.1.1 生命周期方法

在Vue.js框架中，组件是构建用户界面的基石，而生命周期方法（或称为生命周期钩子）则是Vue组件从创建到销毁的整个过程中，自动调用的特定函数。这些方法为开发者提供了在不同阶段介入组件行为的机会，使得我们能够执行诸如数据初始化、DOM操作、事件监听、资源清理等任务。当我们将Vue与TypeScript结合使用时，生命周期方法的使用变得更加灵活且类型安全，有助于我们编写出更加健壮和易于维护的Vue应用。本章节将深入解析Vue组件的生命周期方法，并探讨在TypeScript环境下如何高效利用它们。

#### 9.1.1.1 生命周期方法概览

Vue组件的生命周期可以大致划分为几个阶段：创建、挂载、更新、卸载。每个阶段都伴随着特定的生命周期方法被调用。以下是Vue 2.x和Vue 3.x中常见的生命周期方法概览（注意：Vue 3对生命周期方法进行了部分重命名和引入了一些新的方法）：

**Vue 2.x 生命周期方法**：

- `beforeCreate`：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- `created`：实例已经创建完成之后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- `beforeMount`：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
- `mounted`：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
- `beforeUpdate`：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
- `updated`：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。但是要避免更改状态，因为这可能会导致无限循环的更新。
- `beforeDestroy`：实例销毁之前调用。在这一步，实例仍然完全可用。
- `destroyed`：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

**Vue 3.x 新增/变更的生命周期方法**：

- `beforeUnmount`：对应Vue 2.x的`beforeDestroy`，用于Vue 3的组合式API。
- `unmounted`：对应Vue 2.x的`destroyed`，同样用于Vue 3的组合式API。

此外，Vue 3还引入了`setup()`函数作为组件内使用组合式API的入口点，它会在`beforeCreate`和`created`之间被调用，此时组件的props和context已经可用，但还没有挂载DOM，因此不能访问`this`。

#### 9.1.1.2 TypeScript与生命周期方法

在TypeScript中使用Vue的生命周期方法时，可以充分利用TypeScript的类型系统来增强代码的可读性和健壮性。虽然Vue的生命周期方法本身并不直接提供类型检查（除非使用Vue Class Component或类似的库），但你可以通过接口或类型定义来约束这些方法中的代码逻辑。

**示例：使用TypeScript定义生命周期方法**

```typescript
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    // 组合式API示例，不直接展示生命周期方法
    // 但可以在此基础上结合onMounted等函数
  },
  mounted() {
    // 使用mounted生命周期方法
    console.log('Component is mounted!');
    // TypeScript类型安全：可以在此处安全地操作DOM
    const el = this.$el as HTMLElement;
    el.style.color = 'red';
  },
  beforeDestroy() {
    // 清理操作，如移除事件监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理窗口大小改变
    }
  }
});
</script>
```

在上面的例子中，`mounted`和`beforeDestroy`是Vue的生命周期方法，它们在组件的不同阶段被调用。通过TypeScript，我们可以明确知道`this`的类型（在`mounted`中默认为Vue组件实例），并且可以在不牺牲类型安全性的情况下，执行DOM操作或事件监听器的添加与移除。

#### 9.1.1.3 生命周期方法的最佳实践

1. **避免在`created`和`mounted`中设置过多的逻辑**：尽管这两个方法常用于初始化数据和DOM操作，但过度使用会导致组件逻辑复杂且难以维护。考虑将业务逻辑拆分到更小的函数或计算属性中。

2. **合理利用`beforeUpdate`和`updated`**：这两个方法常用于调试或需要响应数据变化而进行的DOM操作。但务必注意，频繁的DOM操作可能导致性能问题。

3. **清理资源**：在`beforeDestroy`或`beforeUnmount`中清理定时器、事件监听器等资源，防止内存泄漏。

4. **使用组合式API（Vue 3）**：对于Vue 3项目，推荐使用组合式API（如`onMounted`、`onBeforeUnmount`等）来替代传统的选项式API中的生命周期方法。这不仅可以使代码更加模块化和可重用，还能更好地与TypeScript结合，提升开发效率。

5. **类型定义**：虽然Vue的生命周期方法本身不直接提供类型支持，但你可以通过类型定义来增强代码的可读性和健壮性。例如，为`this`在生命周期方法中的类型提供显式注释，或者使用Vue Class Component等库来自动推断类型。

#### 结论

Vue的生命周期方法是Vue组件开发中不可或缺的一部分，它们为开发者提供了在不同阶段介入组件行为的机会。在TypeScript环境下，通过合理利用生命周期方法和TypeScript的类型系统，我们可以编写出更加健壮、易于维护和可扩展的Vue应用。无论你是使用Vue 2.x还是Vue 3.x，理解并熟练掌握生命周期方法都是成为一名高效Vue开发者的关键。

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

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

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

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

Vue3技术解密

Vue面试指南

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

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

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

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

Vue源码完全解析

Vue原理与源码解析

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