一、Vue3 组合式 API 生命周期钩子

在 Vue 3 的组合式 API 中，生命周期钩子可以通过导入相应的函数来使用。这些函数允许你在组件的不同生命周期阶段执行特定的逻辑。以下是 Vue 3 组合式 API 中可用的生命周期钩子及其用法：

1. onMounted

当组件被挂载到 DOM 上后调用。在这个阶段，你可以访问和操作 DOM 元素，或者执行需要依赖 DOM 的操作。

import { onMounted, ref } from 'vue';export default {setup() {const element = ref(null);onMounted(() => {console.log(element.value); // 访问挂载后的 DOM 元素});return {element,};},
};

2. onUnmounted

当组件实例被卸载和解构时调用。在这个阶段，你可以执行清理操作，如取消事件监听器或清理定时器。

import { onUnmounted, ref } from 'vue';export default {setup() {const timer = ref(null);onMounted(() => {timer.value = setInterval(() => {console.log('Timer ticked.');}, 1000);});onUnmounted(() => {clearInterval(timer.value); // 清除定时器});return {};},
};

3. onBeforeMount

在组件挂载到 DOM 之前调用：相关的 render 函数首次被调用。

import { onBeforeMount } from 'vue';export default {setup() {onBeforeMount(() => {console.log('Component is about to be mounted.');});return {};},
};

4. onUpdated

当组件的响应式状态更改导致组件重新渲染后调用。

import { onUpdated, ref } from 'vue';export default {setup() {const count = ref(0);onUpdated(() => {console.log(`Updated count: ${count.value}`);});return {count,};},
};

5. onBeforeUpdate

在组件的响应式状态更改导致重新渲染之前调用。

import { onBeforeUpdate } from 'vue';export default {setup() {onBeforeUpdate(() => {console.log('Component is about to be updated.');});return {};},
};
};

6. onErrorCaptured

当组件或其子组件的渲染函数、生命周期钩子或事件处理器中发生错误时调用。

import { onErrorCaptured } from 'vue';export default {setup() {onErrorCaptured((err, vm, info) => {console.error('Captured error:', err);return false; // 返回 false 以阻止错误继续向上冒泡});return {};},
};

7. onActivated

对于 <keep-alive> 包裹的组件，当组件被激活时调用。

import { onActivated } from 'vue';export default {setup() {onActivated(() => {console.log('Component was activated.');});return {};},
};

8. onDeactivated

对于 <keep-alive> 包裹的组件，当组件被停用时调用。

import { onDeactivated } from 'vue';export default {setup() {onDeactivated(() => {console.log('Component was deactivated.');});return {};},
};

要使用这些生命周期钩子，只需在 setup 函数中导入它们，并按照需要调用即可。这些钩子函数接收与选项式 API 中的生命周期钩子相同的参数，并允许你以函数式的方式处理组件的生命周期事件。

二、Options API 和 Composition API 之间的映射

Vue2 Options-based API	Vue Composition API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

三、组合式 API

Vue 3 引入了组合式 API（Composition API），它是一种新的 API，用于构建 Vue 组件的逻辑。这种 API 解决了大型组件中逻辑难以组织和复用的问题，并提供了更灵活的方式来组织和共享代码。

组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。这有助于将组件的逻辑划分为更小的、更易于管理的部分，并提高了代码的可读性和可维护性。

四、相关链接

1. Vue3官方地址
2. Vue3中文文档
3. 「Vue3系列」Vue3简介及安装
4. 「Vue3系列」Vue3起步/创建项目
5. 「Vue3系列」Vue3指令
6. 「Vue3系列」Vue3 模板语法
7. 「Vue3系列」Vue3 条件语句/循环语句
8. 「Vue3系列」Vue3 组件
9. 「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）
10. 「Vue3系列」Vue3 样式绑定
11. 「Vue3系列」Vue3 事件处理
12. 「vue3系列」Vue3 表单