onbeforeunmount 需与 watch 协同使用以确保状态完整保存：watch 实时捕获变更并可选落盘，onbeforeunmount 兜底写入最终值，组件重载时从 localstorage 恢复。
在 Vue 3 组合式 API 中，onBeforeUnmount 是组件卸载前执行的最后一个可靠时机，适合做状态保存——但它本身不“监听销毁前的状态”，而是提供一个执行保存逻辑的入口。真正要拿到最新、准确的状态，需配合 watch 持续追踪变化，再在 onBeforeUnmount 中读取并落盘。
为什么不能只靠 onBeforeUnmount？
因为 onBeforeUnmount 执行时，响应式数据仍是当前值，看似“就是最后状态”。但若用户快速操作（如连续输入后立即关闭页面），而 watch 没有及时捕获中间变更，或组件未触发更新，就可能漏掉最后一次修改。所以必须让状态变更被实时捕获，再统一兜底。
正确写法：watch + onBeforeUnmount 协同
以下是最常用、最稳妥的实现方式：
- 定义需要持久化的响应式变量（如搜索关键词、表单字段、分页页码）
- 用 watch 监听这些变量，变化时可选地同步写入 localStorage（提升实时性），或仅做标记
- 在 onBeforeUnmount 中再次读取当前值，强制写入 localStorage 或发送到服务端，确保最终状态不丢失
- 组件重新挂载时，优先从 localStorage 读取并赋值给响应式变量，实现状态恢复
代码示例（带注释）
以搜索页为例：
import { ref, watch, onBeforeUnmount } from 'vue'
const searchKey = ref('')
const currentPage = ref(1)
// ✅ 持续监听关键字段，变化即存（可选：加防抖）
watch([searchKey, currentPage], ([newKey, newPage]) => {
localStorage.setItem('searchState', JSON.stringify({ searchKey: newKey, currentPage: newPage }))
}, { immediate: true }) // immediate 确保初始化值也被记录
// ✅ 销毁前兜底：确保最后一次修改一定落盘
onBeforeUnmount(() => {
localStorage.setItem('searchState', JSON.stringify({
searchKey: searchKey.value,
currentPage: currentPage.value
}))
})
补充建议
实际项目中还可优化：
- 对频繁变更的字段（如输入框），watch 内加 debounce 防止高频写入
- 敏感数据避免存在 localStorage，改用 sessionStorage 或加密后存服务端
- 若涉及异步保存（如发请求），应在 onBeforeUnmount 中使用 同步阻塞方式（如 navigator.sendBeacon）保证送达
- 多个组件共用同一份状态时，建议封装成 composable（如 usePersistentState）复用逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
