10.3.2 在setup方法中定义生命周期行为 -TypeScript和Vue从入门到精通(三)

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

### 10.3.2 在`setup`方法中定义生命周期行为

在Vue 3中，`Composition API`的引入为开发者提供了一种更灵活、更模块化的方式来组织和复用组件逻辑。`setup`函数作为`Composition API`的核心入口点，不仅允许我们定义组件的响应式状态、计算属性和方法，还允许我们以一种全新的方式处理组件的生命周期行为。与Vue 2中的`beforeCreate`、`created`、`beforeMount`、`mounted`等生命周期钩子不同，Vue 3通过`onMounted`、`onUpdated`、`onUnmounted`等函数式API在`setup`方法中定义生命周期行为。

#### 10.3.2.1 生命周期行为的概念

在Vue组件中，生命周期行为指的是组件从创建到销毁的整个过程中，Vue框架自动调用的一系列钩子函数。这些钩子函数为开发者提供了在不同阶段执行代码的机会，比如数据初始化、DOM挂载、数据更新后的处理、组件销毁前的清理工作等。

在Vue 3的`Composition API`中，虽然`setup`函数替代了Vue 2中的`beforeCreate`和`created`生命周期钩子（因为`setup`函数在`beforeCreate`之后、`created`之前被调用），但它通过引入新的函数式API来支持其他生命周期行为。

#### 10.3.2.2 `setup`方法中的生命周期函数

Vue 3为`setup`方法提供了几个生命周期函数，允许你在组件的不同阶段执行逻辑：

- **`onMounted(callback)`**：在组件挂载到DOM后调用。对应Vue 2的`mounted`钩子。
- **`onUpdated(callback)`**：在组件的响应式状态更新后调用，但发生在DOM更新之后。对应Vue 2的`updated`钩子。
- **`onUnmounted(callback)`**：在组件卸载时调用。对应Vue 2的`beforeDestroy`和`destroyed`钩子（Vue 3将两者合并为一个）。
- **`onActivated(callback)`**（仅用于`<keep-alive>`组件）：当组件被`<keep-alive>`缓存的组件激活时调用。
- **`onDeactivated(callback)`**（仅用于`<keep-alive>`组件）：当组件被`<keep-alive>`缓存的组件停用时调用。
- **`onErrorCaptured(callback)`**：捕获并处理子组件中发生的错误。
- **`onRenderTracked(callback)`** 和 **`onRenderTriggered(callback)`**：用于调试和性能追踪，分别跟踪响应式依赖的收集和触发。

#### 10.3.2.3 示例：使用`onMounted`和`onUnmounted`

让我们通过一个简单的例子来演示如何在`setup`方法中使用`onMounted`和`onUnmounted`生命周期函数。

```vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

export default {
  name: 'LifecycleDemo',
  setup() {
    const message = ref('Hello, Vue 3 Composition API!');

// 组件挂载到DOM后执行
    onMounted(() => {
      console.log('Component mounted!');
      // 可以在这里执行DOM操作或发起数据请求
    });

// 组件卸载时执行
    onUnmounted(() => {
      console.log('Component unmounted!');
      // 可以在这里执行清理工作，如取消定时器、移除事件监听器等
    });

// 返回给模板使用的响应式引用
    return {
      message,
    };
  },
};
</script>
```

在这个例子中，当组件被挂载到DOM后，控制台会输出“Component mounted!”，这表明`onMounted`中的回调函数被成功调用。同样地，当组件被卸载时，控制台会输出“Component unmounted!”，表明`onUnmounted`中的回调函数被执行。

#### 10.3.2.4 注意事项

- **异步操作**：在`onMounted`中执行异步操作（如API请求）是常见的做法，但要注意处理好异步操作的结果和可能的错误。
- **依赖追踪**：由于Vue 3的响应式系统基于Proxy，因此在`setup`方法中定义的响应式状态或计算属性将自动被Vue跟踪。然而，当在生命周期函数中访问外部响应式源时（如父组件传递的props），可能需要额外注意依赖的更新和清理。
- **性能优化**：合理使用生命周期函数可以帮助你优化组件的性能，比如只在需要时更新DOM或执行重计算。
- **代码组织**：随着组件逻辑的复杂化，考虑将相关的生命周期函数和响应式状态封装在自定义的`Composition API`函数中，以提高代码的可读性和可维护性。

#### 10.3.2.5 实战技巧

- **利用TypeScript**：在TypeScript项目中，可以利用TypeScript的类型系统来增强生命周期函数的类型安全性和可读性。
- **组合式API的复用**：可以将多个相关的响应式状态和生命周期函数封装成一个自定义的`Composition API`函数，然后在多个组件中复用。
- **调试和测试**：使用Vue Devtools等工具来调试和跟踪生命周期函数的执行，同时编写单元测试来验证生命周期函数中的逻辑。

#### 结论

Vue 3的`Composition API`通过引入`setup`方法和一系列生命周期函数，为开发者提供了一种更灵活、更强大的方式来组织和复用组件逻辑。通过合理使用这些生命周期函数，你可以更好地控制组件的生命周期行为，优化组件的性能，并编写出更加清晰、可维护的代码。随着Vue 3的普及，掌握`Composition API`及其生命周期函数的使用将成为Vue开发者必备的技能之一。

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

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

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

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

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

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

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

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

移动端开发指南

VUE组件基础与实战

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

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

Vue原理与源码解析