Vue 3上传中断控制靠状态机+分片设计+主动检查，非生命周期钩子；onUnmounted仅用于清理资源，不可靠续传；分片成功后须立即持久化；onBeforeUnmount仅作离开提醒；核心在响应式状态与递归上传结构。

Vue 3 生命周期钩子本身不直接处理上传中断逻辑，它们只是提供时机入口；真正的中断控制靠状态机 + 分片设计 + 主动检查，而不是依赖 onUnmounted 或 beforeUnmount 去“挽救”一次上传。

不要在 onUnmounted 里强行续传或保存进度

很多人误以为页面关闭前用 onUnmounted 捕获状态就能实现断点续传——实际不可靠。该钩子触发时，浏览器可能已终止网络请求、释放内存、甚至冻结标签页（尤其移动端或后台 tab）。此时调用 API 查询已上传分片、或尝试发请求，大概率失败或静默丢弃。

• onUnmounted 是清理资源的时机（如取消定时器、清除未完成的 Web Worker），不是恢复业务的时机
• 已上传的分片必须在每次成功响应后，就持久化到 localStorage 或 IndexedDB，不能等到卸载时才存
• 服务端需支持按文件哈希查询已存在分片，前端恢复时主动拉取，而非依赖前端“记得”哪些传过了

用 onBeforeUnmount 做用户友好拦截，而非技术兜底

这个钩子适合做「确认提醒」，给用户一次反悔机会，但不能用于执行上传逻辑。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 监听 uploadStatus.value === 'uploading' 时，调用 window.addEventListener('beforeunload', handler) 提示“上传未完成，离开将暂停”
• 在 onBeforeUnmount 中移除该监听，并清除临时状态（如 pendingChunks 引用），避免内存泄漏
• 不在此处发起任何异步操作（如 await 上传、await 查询分片），它不等待 Promise 完成

真正起作用的是 setup 内的状态与递归上传结构

中断能力来自你如何组织上传流程，和生命周期无关。关键在：把上传拆成可停、可查、可跳的原子操作。

立即学习“前端免费学习笔记（深入）”；

• 用 ref 定义 isPaused、uploadStatus、pendingChunks，所有 UI 和逻辑都响应式订阅它们
• uploadNextChunk 函数内部先检查 if (isPaused.value) return，再发请求；成功后 shift() 下一个分片，再递归调用自己
• 每个分片上传成功后，立刻更新 uploadedChunks 数组，并写入 localStorage，确保下次进入页面能准确跳过
• 点击“暂停”只设 isPaused.value = true；点击“继续”只触发 uploadNextChunk()，不重置队列也不重建状态

补充：Web Worker 中的哈希计算要独立于组件生命周期

计算文件 MD5 很耗时，必须放 Web Worker。它的启动、通信、终止不能绑定在 onMounted/onUnmounted 上。

• 在 setup 里初始化 Worker，用 ref 保存 worker 实例，便于后续 postMessage 控制
• worker 发送 hash 结果后，主动 terminate()；不要等 onUnmounted 才关，避免残留线程
• 如果用户中途关闭页面，worker 会被浏览器自动回收，无需手动干预