重庆模板自助建站广州网站维护

在 Vue 3 中，生命周期钩子函数的使用方式与 Vue 2 有所不同，它主要通过组合式 API 来调用。下面为你详细介绍 Vue 3 的生命周期钩子函数及其使用场景。

生命周期钩子对应关系及差异

阶段	Vue 2 选项式 API	Vue 3 组合式 API	Vue 3 选项式 API（兼容 Vue 2）	说明
创建阶段	beforeCreate created	无直接对应，使用 setup() 替代	beforeCreate created	- 在 Vue 2 中，beforeCreate 时实例初始化完成，数据观测和 event/watcher 事件配置还未开始；created 时实例已完成数据观测、property 和 method 计算、watch/event 事件回调。 - Vue 3 中 setup() 在 beforeCreate 之前执行，承担了初始化数据和方法的功能。
挂载阶段	beforeMount mounted	onBeforeMount onMounted	beforeMount mounted	- beforeMount 表示挂载开始，相关 render 函数首次被调用。 - mounted 表示实例已挂载到 DOM 上。 - Vue 3 组合式 API 以函数形式使用，需要从 vue 导入。
更新阶段	beforeUpdate updated	onBeforeUpdate onUpdated	beforeUpdate updated	- beforeUpdate 在数据变化且 DOM 更新前调用。 - updated 在数据变化且 DOM 更新后调用。 - Vue 3 组合式 API 以函数形式使用。
销毁阶段	beforeDestroy destroyed	onBeforeUnmount onUnmounted	beforeDestroy （仍可用，但推荐 beforeUnmount） destroyed （仍可用，但推荐 unmounted）	- beforeDestroy（Vue 3 推荐 beforeUnmount）在实例销毁前调用，实例仍完全可用。 - destroyed（Vue 3 推荐 unmounted）在实例销毁后调用，所有事件监听器和子实例都已销毁。 - Vue 3 组合式 API 以函数形式使用，且名称更符合语义。
特殊情况	activated deactivated errorCaptured	onActivated onDeactivated onErrorCaptured	activated deactivated errorCaptured	- activated 和 deactivated 用于 keep-alive 缓存的组件，分别在组件激活和停用时调用。 - errorCaptured 用于捕获子孙组件抛出的错误。 - Vue 3 组合式 API 以函数形式使用。

代码示例对比

Vue 3 的生命周期钩子函数在功能上与 Vue 2 对应，但使用方式因组合式 API 的引入而有所不同。下面为你详细介绍 Vue 3 各个生命周期钩子及其使用场景。

1. 组合式 API 生命周期钩子

组合式 API 是 Vue 3 推荐的编写组件逻辑的方式，使用这些生命周期钩子需要从 vue 中导入相应函数。

1.1 setup

虽然 setup 不算严格意义上的生命周期钩子，但它是组合式 API 的入口，在组件实例初始化时最早执行，在 beforeCreate 和 created 之前。

<template><div>示例组件</div>
</template>
<script setup>
// 这里可以进行数据初始化和逻辑定义
console.log('setup 执行');
</script>

1.2 onBeforeMount

在组件挂载开始之前调用，此时模板已经编译完成，但还未挂载到 DOM 上。

<template><div>示例组件</div>
</template>
<script setup>
import { onBeforeMount } from 'vue';
onBeforeMount(() => {console.log('组件即将挂载');
});
</script>

1.3 onMounted

组件挂载到 DOM 后调用，可用于进行一些依赖 DOM 的操作，如初始化第三方插件。

<template><div id="my-element">示例组件</div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {const element = document.getElementById('my-element');console.log('组件已挂载，获取到元素:', element);
});
</script>

1.4 onBeforeUpdate

在响应式数据发生变化，DOM 重新渲染之前调用，可用于在更新前保留旧的 DOM 状态。

<template><div>{{ count }}</div><button @click="count++">增加</button>
</template>
<script setup>
import { ref, onBeforeUpdate } from 'vue';
const count = ref(0);
onBeforeUpdate(() => {console.log('数据即将更新，当前 count:', count.value);
});
</script>

1.5 onUpdated

在响应式数据发生变化，DOM 重新渲染完成后调用，可用于在更新后执行一些操作。

<template><div>{{ count }}</div><button @click="count++">增加</button>
</template>
<script setup>
import { ref, onUpdated } from 'vue';
const count = ref(0);
onUpdated(() => {console.log('数据更新完成，当前 count:', count.value);
});
</script>

1.6 onBeforeUnmount

在组件实例销毁之前调用，可用于清理定时器、事件监听器等资源，防止内存泄漏。

<template><div>示例组件</div>
</template>
<script setup>
import { onBeforeUnmount } from 'vue';
let timer;
timer = setInterval(() => {console.log('定时器运行中');
}, 1000);
onBeforeUnmount(() => {clearInterval(timer);console.log('组件即将销毁，已清除定时器');
});
</script>

1.7 onUnmounted

在组件实例销毁之后调用，此时组件的所有事件监听器和子实例都已被销毁。

<template><div>示例组件</div>
</template>
<script setup>
import { onUnmounted } from 'vue';
onUnmounted(() => {console.log('组件已销毁');
});
</script>

1.8 onErrorCaptured

当捕获到子孙组件抛出的错误时调用，可用于全局错误处理。

<template><ChildComponent />
</template>
<script setup>
import { onErrorCaptured } from 'vue';
import ChildComponent from './ChildComponent.vue';
onErrorCaptured((err, instance, info) => {console.log('捕获到错误:', err);console.log('错误来源实例:', instance);console.log('错误信息:', info);return false; // 阻止错误继续向上传播
});
</script>

1.9 onRenderTracked 和 onRenderTriggered

这两个钩子主要用于调试，onRenderTracked 在响应式依赖被追踪时触发，onRenderTriggered 在响应式依赖发生变化导致组件重新渲染时触发。

<template><div>{{ count }}</div><button @click="count++">增加</button>
</template>
<script setup>
import { ref, onRenderTracked, onRenderTriggered } from 'vue';
const count = ref(0);
onRenderTracked((event) => {console.log('渲染追踪:', event);
});
onRenderTriggered((event) => {console.log('渲染触发:', event);
});
</script>

1.10 onActivated 和 onDeactivated

用于 keep-alive 缓存的组件，onActivated 在组件被激活时调用，onDeactivated 在组件停用时调用。

<template><keep-alive><component :is="currentComponent" /></keep-alive><button @click="toggleComponent">切换组件</button>
</template>
<script setup>
import { ref, onActivated, onDeactivated } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
const currentComponent = ref(ComponentA);
const toggleComponent = () => {currentComponent.value = currentComponent.value === ComponentA ? ComponentB : ComponentA;
};
onActivated(() => {console.log('组件被激活');
});
onDeactivated(() => {console.log('组件停用');
});
</script>

2. 选项式 API 生命周期钩子（Vue 3 仍支持）

Vue 3 也兼容 Vue 2 的选项式 API 写法，使用方式与 Vue 2 基本一致。

<template><div>示例组件</div>
</template>
<script>
export default {beforeCreate() {console.log('beforeCreate 执行');},created() {console.log('created 执行');},beforeMount() {console.log('beforeMount 执行');},mounted() {console.log('mounted 执行');},beforeUpdate() {console.log('beforeUpdate 执行');},updated() {console.log('updated 执行');},beforeDestroy() {console.log('beforeDestroy 执行');},destroyed() {console.log('destroyed 执行');}
};
</script>

在 Vue 3 中，推荐优先使用组合式 API 的生命周期钩子，以更好地组织和复用逻辑。