onbeforeunmount 适用于编辑表单等需兜底保存草稿的场景，应在 dom 存在、实例可用时同步存 localstorage 或发轻量 api 请求，不可 await，且需与正式提交逻辑解耦。
onBeforeUnmount 是组件卸载前的最后机会，适合保存未提交的草稿数据。它在 DOM 尚未移除、组件实例仍完全可用时触发，能安全读取响应式状态并执行异步保存逻辑。
什么时候该用 onBeforeUnmount 保存草稿
适用于用户可能中途离开但数据尚未提交的场景，比如编辑表单、富文本输入、多步骤配置等。注意：它不适用于需要等待网络请求完成后再卸载的强一致性场景（此时应配合路由守卫或弹窗确认）。
基础写法：监听变化 + 卸载前保存
草稿保存不是“只在离开时做一次”，而是“持续更新 + 最终兜底”。推荐搭配 watch 或 computed 实时同步草稿，再在 onBeforeUnmount 中做最终落库或本地缓存：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用 ref 或 reactive 管理草稿数据（如 draft.value）
- 用 watch 监听关键字段，在输入时自动更新草稿对象
- 在 onBeforeUnmount 中调用保存函数（可同步存 localStorage，或发起轻量 API 请求）
实际代码示例
假设一个简易笔记编辑组件：
import { ref, watch, onBeforeUnmount } from 'vue'
export default {
setup() {
const content = ref('')
const draftKey = 'note-draft-123'
// 持续保存到 localStorage
watch(content, (newVal) => {
localStorage.setItem(draftKey, newVal)
}, { immediate: true })
// 卸载前再确保一次（防极端情况，如页面意外刷新）
onBeforeUnmount(() => {
localStorage.setItem(draftKey, content.value)
// 可选：触发一次后端草稿接口（注意不 await，避免阻塞卸载）
fetch('/api/drafts', {
method: 'POST',
body: JSON.stringify({ content: content.value })
}).catch(() => {})
})
return { content }
}
}
注意事项
避免常见陷阱：
- 不要 await 异步保存：onBeforeUnmount 不等待 Promise，await 会导致请求被中断
- 区分“临时缓存”和“正式提交”：草稿保存逻辑应与 submit 按钮解耦，防止重复提交
- 清理冗余草稿：若用户最终提交成功，应在提交后主动清除 localStorage 中对应 key
-
考虑 keep-alive 场景：如果组件被
缓存，onBeforeUnmount 不会触发，需改用 onDeactivated
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
