Vue 3 的生命周期钩子需从'vue'导入onXxx函数，在setup()或<script setup>顶层同步调用；onMounted适合发请求，onBeforeUnmount必须清理定时器、事件等副作用，避免内存泄漏。
Vue 3 的 Composition API 中，生命周期逻辑不是写在对象选项里，而是通过导入对应的 onXxx 函数，在 setup() 或 <script setup> 中直接调用。关键在于：钩子是函数，必须在组件上下文中注册，且只能在同步执行的 setup 阶段调用（不能在异步回调或事件中调用）。
生命周期钩子怎么引入和使用
所有生命周期函数都从 'vue' 导入，形如 onMounted、onUnmounted 等。它们接收一个回调函数，该回调会在对应时机自动执行。
- 必须在
setup()内部或<script setup>的顶层作用域中调用，不能包裹在普通函数或异步操作内部 - 同一个钩子可多次调用，回调会按注册顺序依次执行
- 不支持返回值，也不应 await 钩子本身（钩子本身不返回 Promise）
常用钩子的典型用途和写法
不同钩子对应不同阶段，用途差异明显，选错时机容易引发问题：
-
onMounted：DOM 已挂载，适合发起请求、初始化第三方库、绑定事件监听器
例如：onMounted(() => { fetchData(); initChart(); }) - onBeforeUpdate：响应式数据已变更、但 DOM 尚未更新，适合读取旧 DOM 状态（如滚动位置）
- onUpdated：DOM 已完成更新，适合操作新 DOM；但避免在此修改响应式状态，否则可能触发无限循环
- onBeforeUnmount：组件卸载前执行，是清理资源的黄金位置，比如清除定时器、取消请求、移除全局事件监听器
- onUnmounted：组件实例已销毁，无法访问响应式数据或 this，仅适合极轻量的收尾（如日志记录）
配合异步操作的注意事项
在生命周期中处理异步逻辑（如 API 请求）时，需兼顾竞态和内存安全：
立即学习“前端免费学习笔记（深入）”；
- 请求应在
onMounted中发起，确保组件已挂载、状态可响应 - 使用
ref或reactive管理加载状态和数据，保持响应式更新 - 若请求耗时较长，组件可能在响应返回前已卸载——需在
onBeforeUnmount中标记“已卸载”，并在回调中检查该标记，避免向已销毁组件赋值 - 避免在
onUpdated或onBeforeUpdate中发起新请求，易造成重复或混乱
清理副作用的正确姿势
很多逻辑需要手动清理，否则会导致内存泄漏或意外行为：
- 定时器：在
onMounted启动，在onBeforeUnmount清除
例如：let timer; onMounted(() => { timer = setInterval(...)}); onBeforeUnmount(() => clearInterval(timer)) - 事件监听器：绑定在全局或自定义元素上时，务必在卸载前解绑
- 第三方库实例（如 Map、Chart）：在
onBeforeUnmount调用其 destroy 方法 - watch 或 computed 的清理：它们自身会随组件自动停止，无需手动干预
