onUnmounted() 卸载完成钩子
最后更新：2026-10-22
onUnmounted() 卸载完成钩子
onUnmounted() 在组件销毁、DOM 移除、所有响应式副作用停止之后调用。
| 分组 | 生命周期钩子 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
onUnmounted(() => {
// 组件完全销毁，清理外部资源
})⚙️ 参数
| callback | 卸载完成后执行的函数 |
|---|
返回值：无
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
点「切换子组件」隐藏后，控制台打印「子组件已卸载」。💡 要点
ℹ️ 说明 Vue 会自动停止该组件的侦听器与副作用；这里只需处理框架管不到的外部资源。
⚠️ 注意 此时读 DOM 已不可靠（可能已被移除）。
💡 提示 多实例场景务必清理全局监听：否则每个已销毁实例的回调仍在运行。
🏷️ 相关生命周期钩子
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 还需要手动停 watch 吗？
A 不需要：组件内创建的效果随组件销毁自动停止（脱离作用域的除外）。
Q 和 onBeforeUnmount 怎么选？
A 纯逻辑清理用 onUnmounted；需要读取 DOM 的清理放 onBeforeUnmount。
Q SSR 下会执行吗？
A 服务端渲染不执行卸载钩子，它只发生在浏览器端。
