用 watchEffect 实现视频播放自动存档，关键在于通过 ref 同步 currentTime 并在 watchEffect 中读取以触发依赖追踪，结合 onInvalidate 清理定时器、节流存档、AbortController 中止旧请求、时间戳防竞态及 isSaving/saveError 状态反馈确保可靠性。
用 watchEffect 实现视频播放自动存档，关键在于：把当前播放进度（currentTime）作为响应式状态读取，让 Vue 自动追踪并触发存档逻辑；同时用 onInvalidate 安全清理未完成的定时保存任务，避免重复提交或覆盖。
自动追踪播放进度变化
视频元素的 currentTime 本身不是响应式数据，需手动桥接。推荐做法是用一个 ref 同步更新它：
- 监听视频的
timeupdate事件，在回调中更新currentProgress = ref(0) - 在
watchEffect内直接访问currentProgress.value—— Vue 会自动将其纳入依赖追踪 - 无需写
watch(videoRef, ...)或手动列依赖，只要“读取”就生效
防抖+安全存档：避免高频写入
用户拖拽、快进时 currentTime 可能每秒触发数十次，直接每次调用 API 不现实。应结合节流与清理机制：
- 用
setTimeout延迟提交，比如等 3 秒无新进度才存档 - 每次进入
watchEffect时，先调用上一次的clearTimeout（通过onInvalidate注册） - 只在用户真正暂停或离开页面前（如
beforeunload）强制保存最后一次值
处理异步请求与竞态问题
存档请求是异步的，旧请求未返回、新进度又来了，容易导致“后发先至”——低进度覆盖高进度。解决方案：
- 为每次请求生成唯一标识（如用
ref(Date.now())记录当前存档时间戳） - 请求成功后，比对当前标识是否仍为最新，否则忽略响应
- 配合
AbortController主动中止旧请求，减少无效网络开销
状态反馈与错误恢复
用户需要知道存档是否成功，尤其在网络不稳定时：
- 定义
isSaving = ref(false)和saveError = ref(null) - 在
watchEffect开头设isSaving.value = true，请求完成后重置 - 失败时保留最近一次有效进度，下次变更时自动重试（可加退避策略）
- 组件卸载前检查是否还有待存档数据，做兜底提交
