onMounted用于组件挂载后初始化（如请求数据、绑定事件），onUnmounted专用于清理（如解绑事件、取消请求、清除定时器），二者需配对使用以避免内存泄漏；自定义Hook可封装配对逻辑提升复用性。
在 Composition API 中，onMounted 和 onUnmounted 是管理副作用的核心生命周期钩子：前者用于初始化（如请求数据、绑定事件、启动定时器），后者专用于清理（如移除监听、取消请求、清除定时器），避免内存泄漏或状态残留。
onMounted：执行挂载后的副作用
组件 DOM 渲染完成、可访问 ref 元素时触发，适合做一次性初始化操作。
- 可安全读取
ref模板引用（如chartContainer.value），调用第三方库初始化 - 发起异步请求时，建议配合
AbortController，为后续卸载时中止请求留出接口 - 绑定全局事件（如
window.addEventListener('resize', handler)）必须配套在onUnmounted中解绑 - 避免在
onMounted中直接修改 props 或调用未声明的响应式变量——所有依赖需提前在setup中定义
onUnmounted：必须清理的副作用场景
组件即将从 DOM 移除时执行，是防止副作用“逃逸”的最后一道防线。
- 清除由
onMounted添加的事件监听器，例如window.removeEventListener('mousemove', update) - 主动调用
abortController.abort()终止仍在进行的fetch请求 - 清除
setInterval或setTimeout定时器（保存其返回值 ID，再在卸载时clearInterval(id)） - 若使用了第三方库的实例（如 Chart.js、Map 实例），应调用其销毁方法（如
chart.destroy()）
组合式封装：把副作用逻辑收进自定义 Hook
将挂载与卸载配对的逻辑提取为可复用函数，提升一致性与可维护性。
- 例如
useMouse()内部同时调用onMounted绑定mousemove，和onUnmounted解绑 - 自定义 Hook 可接收参数（如事件名、回调、目标元素），内部自动处理生命周期配对
- 多个副作用可共用同一组生命周期钩子，无需重复导入或分散书写
- 在
script setup中直接解构使用，语义清晰、无样板代码
常见陷阱与注意事项
看似简单，但几个细节容易引发问题：
-
onMounted不保证子组件已挂载，若需操作子组件 DOM，应使用nextTick或onUpdated配合判断 - 异步请求未加
try/catch或未检查组件是否仍处于活跃状态（可用isCurrentInstanceAlive辅助，或手动标记），可能导致unmounted后更新已销毁组件的响应式数据 - 同一个组件中多次调用
onMounted是允许的，会按注册顺序依次执行，但不推荐——应集中初始化逻辑 -
onUnmounted在服务端渲染（SSR）中不会执行，涉及客户端专属副作用时需注意环境判断
