onBeforeUnmount() 卸载前钩子
最后更新：2026-10-22
onBeforeUnmount() 卸载前钩子
onBeforeUnmount() 在组件即将销毁前调用：DOM 仍可用，是手动清理定时器、监听、第三方实例的最后时机。
| 分组 | 生命周期钩子 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
onBeforeUnmount(() => {
clearInterval(timer)
chart.destroy()
})⚙️ 参数
| callback | 卸载前执行的函数 |
|---|
返回值：无
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
秒数每秒加 1；组件卸载后定时器停止（控制台不再有更新）。💡 要点
💡 提示 所有手动资源都在这里成对释放：setInterval↔clearInterval、addEventListener↔removeEventListener、第三方实例↔destroy()。
ℹ️ 说明 若清理逻辑写在组合式函数里，用 onScopeDispose 更通用。
⚠️ 注意 此时 DOM 还在；若清理依赖 DOM 状态要赶在这之前完成。
🏷️ 相关生命周期钩子
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 和 onUnmounted 的分工？
A 两者都常用于清理：区别在 DOM 是否还可用——需要 DOM 的清理放这里，纯逻辑放 onUnmounted。
Q 不清理会怎样？
A 定时器继续运行、监听器与新实例堆叠，长时间使用造成内存泄漏。
Q 能在这里阻止卸载吗？
A 不能，Vue 无此机制；用 v-if 控制显示才是正确做法。
