unmounted 卸载完成（选项式）

最后更新：2026-10-22

unmounted 在实例销毁、DOM 移除之后调用：做最后的资源释放与状态复位。

📝 语法

export default {
  unmounted() {
    // 实例已销毁
  }
}

value	无参数

返回值：无返回值

修改下面的代码，在预览区实时查看效果：

输出：

切换隐藏后控制台输出「子组件已销毁」。

ℹ️ 说明 Vue 已自动停止该实例的侦听器与副作用，这里只需处理外部资源。

⚠️ 注意 此时不要再访问 DOM（可能已移除）。

更多案例即将上线。

Q 还需要手动停 watch 吗？

A 不需要，实例销毁会一并停止。

Q 多层嵌套组件谁先触发？

A 父组件先触发 beforeUnmount，子组件随后依次销毁。

Q SSR 下会执行吗？

A 不会，仅浏览器端。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。