Vue 3 组合式API中的生命周期钩子函数介绍

一、什么是生命周期钩子函数？

生命周期钩子函数是Vue组件在不同阶段自动调用的函数，用于执行特定的逻辑，比如初始化数据、DOM操作、清理资源等。在Vue 2中，我们通常在组件的选项对象中定义这些钩子：

export default {
  created() {
    // 组件实例创建后执行
  },
  mounted() {
    // 组件挂载到DOM后执行
  },
  beforeUnmount() {
    // 组件卸载前执行
  }
}

而在Vue 3的组合式API中，生命周期钩子函数变成了可以在setup函数内直接调用的函数，更加灵活。

二、Vue 3组合式API中的生命周期钩子函数

Vue 3为组合式API提供了一系列对应的生命周期钩子函数，这些函数需要从vue包中导入使用。常用的生命周期钩子函数包括：

钩子函数	说明
onBeforeMount	组件挂载之前调用
onMounted	组件挂载完成后调用
onBeforeUpdate	组件更新之前调用
onUpdated	组件更新完成后调用
onBeforeUnmount	组件卸载之前调用
onUnmounted	组件卸载后调用
onActivated	keep-alive组件激活时调用
onDeactivated	keep-alive组件停用时调用
onErrorCaptured	捕获子组件错误时调用

三、如何使用组合式生命周期钩子函数？

1. 导入钩子函数

import { onMounted, onUnmounted } from 'vue';

2. 在setup函数中调用

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onUnmounted(() => {
      console.log('组件已卸载');
    });

    return {};
  }
}

这样写的好处是，生命周期钩子函数可以和响应式状态、计算属性、方法等逻辑混合在一起，形成高度内聚的代码块。

四、示例：使用onMounted和onUnmounted实现计时器

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    let timer = null;

    onMounted(() => {
      timer = setInterval(() => {
        count.value++;
      }, 1000);
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return {
      count
    };
  }
}

这段代码展示了如何在组件挂载时启动计时器，并在组件卸载时清理计时器，避免内存泄漏。

五、总结

• Vue 3组合式API中的生命周期钩子函数需要从vue导入使用。
• 这些钩子函数都在setup函数内调用，方便将生命周期逻辑与组件状态紧密结合。
• 组合式API的生命周期钩子使代码更加模块化、易于维护，特别适合大型项目和复杂组件。