一、Vue3生命周期革新特性
相较于Vue2，Vue3通过Composition API带来了更灵活的生命周期管理方式。通过onBeforeMount等函数注册钩子时，实际是通过injectHook方法将回调函数注册到组件实例的hmr属性中。
在 Vue3 应用开发中，生命周期钩子函数扮演着至关重要的角色。它们允许开发者在组件从创建到销毁的各个阶段执行自定义逻辑，为开发者提供了对组件生命周期的精细控制能力。理解和熟练运用这些钩子函数，是开发高效、健壮 Vue3 应用的关键。
// 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 的异步数据请求。
<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集成示例：
<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 时要避免陷入死循环，因为再次修改数据可能会再次触发更新。
<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 中移除，组件相关的事件监听器、定时器等都已被清理。
- 使用场景：理论上在此处已无需进行复杂操作，不过可以用于记录组件卸载相关的日志信息。
<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，一名热爱编程的小伙伴。在这里，我将分享一些实用的开发技巧和经验心得。如果你也对编程充满热情，欢迎关注并一起交流学习！如果你对这篇文章有任何疑问、建议或者独特的见解，欢迎在评论区留言。无论是探讨技术细节，还是分享项目经验，都能让我们共同进步。
