一、Vue3生命周期革新特性
相较于Vue2，Vue3通过Composition API带来了更灵活的生命周期管理方式。通过onBeforeMount等函数注册钩子时，实际是通过injectHook方法将回调函数注册到组件实例的hmr属性中。
在 Vue3 应用开发中，生命周期钩子函数扮演着至关重要的角色。它们允许开发者在组件从创建到销毁的各个阶段执行自定义逻辑，为开发者提供了对组件生命周期的精细控制能力。理解和熟练运用这些钩子函数，是开发高效、健壮 Vue3 应用的关键。
javascript
// Vue3源码片段（packages/runtime-core/src/apiLifecycle.ts）
export function injectHook(
type: LifecycleHook,
hook: Function & { __weh?: Function },
target: ComponentInternalInstance | null
) {
const hooks = target[type] || (target[type] = [])
hooks.push(hook)
}二、创建阶段钩子函数
2.1 beforeCreate
- 触发时机 ：在组件实例被创建之前，此时组件的
data、computed、methods等属性尚未初始化，无法访问this。 - 使用场景 ：虽然在实际开发中
beforeCreate使用较少，但在一些需要在组件创建前执行通用逻辑的场景下，例如记录组件创建日志等操作，可在此处编写代码。
2.2 created
- 触发时机 ：组件实例创建完成后调用，此时
data、computed、methods等已初始化，可通过this访问组件的属性和方法，但 DOM 尚未挂载。 - 使用场景：常用于进行数据的初始化操作，例如从本地存储中读取数据并赋值给组件的响应式数据，或进行一些简单的计算属性初始化。也适合在此处发起一些不需要依赖 DOM 的异步数据请求。
html
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('');
const fetchData = async () => {
const response = await fetch('/api/data');
const data = await response.json();
message.value = data.text;
};
fetchData();
</script>三、挂载阶段钩子函数
3.1 beforeMount
- 触发时机：在组件挂载到 DOM 之前调用，此时模板已经编译完成，但尚未将其挂载到实际的 DOM 节点上。
- 使用场景：可用于在挂载前对模板或数据进行最后的调整，例如修改即将挂载的 DOM 的一些属性。不过由于 DOM 尚未挂载，直接操作 DOM 的意义不大。
3.2 mounted
- 触发时机 ：组件成功挂载到 DOM 后调用，此时可以通过
$el访问真实的 DOM 元素，或使用refs访问子组件及元素。 - 使用场景：常用于需要操作 DOM 的场景，比如初始化第三方插件（如图表库、富文本编辑器等），这些插件通常需要在真实 DOM 存在的情况下进行初始化。也可以在此时进行一些依赖于 DOM 结构的计算或数据处理。
3.3 第三方库集成规范
以ECharts集成示例：
html
<template>
<div ref="chartContainer"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js';
const chartContainer = ref(null);
onMounted(() => {
if (chartContainer.value) {
new Chart(chartContainer.value, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
});
</script>四、更新阶段钩子函数
4.1 beforeUpdate
- 触发时机 ：在组件数据更新之前调用，此时组件的
data已经发生变化，但 DOM 尚未更新。 - 使用场景：可用于在数据更新前进行一些准备工作，例如保存当前 DOM 的状态，以便在更新后进行对比或恢复。
4.2 updated
- 触发时机：组件数据更新且 DOM 重新渲染完成后调用。
- 使用场景 ：适合进行一些依赖于更新后 DOM 状态的操作，例如重新计算一些基于新 DOM 结构的布局信息，或者对更新后的 DOM 进行进一步的样式调整。但需要注意，在
updated钩子函数中操作 DOM 时要避免陷入死循环，因为再次修改数据可能会再次触发更新。
html
<template>
<div @click="updateData">
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue';
const message = ref('初始消息');
const updateData = () => {
message.value = '更新后的消息';
};
onBeforeUpdate(() => {
console.log('数据即将更新，当前消息:', message.value);
});
onUpdated(() => {
console.log('数据已更新，DOM 已重新渲染');
});
</script>五、卸载阶段钩子函数
5.1 beforeUnmount
- 触发时机：在组件实例被卸载之前调用，此时组件仍然存在，可以访问组件的属性和方法。
- 使用场景：常用于清理组件在运行过程中创建的一些副作用，例如清除定时器、解绑事件监听器等，以避免内存泄漏。
5.2 unmounted
- 触发时机：组件实例被成功卸载后调用，此时组件及其所有子组件都已从 DOM 中移除，组件相关的事件监听器、定时器等都已被清理。
- 使用场景：理论上在此处已无需进行复杂操作，不过可以用于记录组件卸载相关的日志信息。
html
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { ref, onBeforeUnmount, onUnmounted } from 'vue';
const message = ref('组件内容');
let timer;
const startTimer = () => {
timer = setInterval(() => {
console.log('定时器运行中');
}, 1000);
};
startTimer();
onBeforeUnmount(() => {
clearInterval(timer);
console.log('组件即将卸载，清除定时器');
});
onUnmounted(() => {
console.log('组件已卸载');
});
</script>六、常见误区与解决方案
| 问题现象 | 原因分析 | 解决方案 |
|---|---|---|
| mounted中获取DOM为null | 异步渲染延迟 | 使用nextTick() |
| 内存泄漏 | 未清理事件监听 | 建立清理函数注册表 |
| 重复请求 | 未取消前次请求 | 使用AbortController |
写在最后
哈喽！大家好呀，我是 Code_Cracke，一名热爱编程的小伙伴。在这里，我将分享一些实用的开发技巧和经验心得。如果你也对编程充满热情，欢迎关注并一起交流学习！
如果你对这篇文章有任何疑问、建议或者独特的见解，欢迎在评论区留言。无论是探讨技术细节，还是分享项目经验，都能让我们共同进步。