必须在 beforeunmount 中清理离线同步定时器，因其是最后一个能安全访问响应式数据并调用 cleartimeout/clearinterval 的时机；unmounted 时组件实例已解绑，易导致空引用错误或内存泄漏。
Vue 3 中管理离线缓存同步相关的定时器，核心在于“定时器清理必须早于组件失活”，尤其当它服务于离线数据同步（如轮询 API、重试队列、本地缓存刷新）时，稍有延迟就可能触发对已销毁组件的响应式访问或引发内存泄漏。关键不是等组件卸载完再处理，而是在 beforeUnmount 阶段完成全部清理。
为什么必须用 beforeUnmount 而不是 unmounted
离线同步类定时器往往依赖组件内 ref 数据、computed 状态或 emit 通知。unmounted 钩子执行时，组件实例已解绑响应式系统，this 或 setup 中的响应式变量可能为 null 或不可读——此时若定时器回调仍触发，就会报 Cannot read property 'xxx' of null。beforeUnmount 是最后一个能安全读写组件状态、调用 clearTimeout/clearInterval 的时机。
定时器与离线缓存逻辑需绑定生命周期
不要把定时器当成独立脚本运行。它应和缓存策略强关联：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 在 onMounted 或 onActivated（若组件被 KeepAlive 缓存）中启动同步定时器
- 用 ref 存储 timer ID，确保 beforeUnmount 可访问
- 若使用 IndexedDB 或 localStorage 做离线缓存，同步定时器启动前应先检查缓存初始化是否完成，避免竞态
- 对于“失败后指数退避重试”的场景，每次 setTimer 都要覆盖旧 timer.value，防止多个定时器叠加
KeepAlive 场景下要额外处理激活/停用
如果组件被
- onDeactivated 中应暂停或清除当前同步定时器（因为组件视图已隐藏，无需持续拉取）
- onActivated 中重新启动定时器（恢复同步）
- 仍需在 beforeUnmount 中兜底清理——比如用户关闭整个 Tab 或跳转到其他路由，组件最终卸载时必须释放资源
推荐封装成可感知生命周期的同步 Hook
避免每个组件重复写 timer.value + beforeUnmount。可封装一个 useOfflineSync：
- 接收同步函数、间隔时间、启用开关
- 内部自动用 ref 管理 timer，并在 beforeUnmount / onDeactivated 中调用 clearInterval
- 暴露 start() / pause() / forceSync() 方法，便于手动触发
- 可集成 AbortController，让请求也支持中断（配合 fetch signal）
不复杂但容易忽略：定时器本身没有“上下文”，它只认 ID 和回调。你得主动把它放进组件的生命周期节奏里，而不是让它自己跑着不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
