组合式 API 中处理定时器需在 onMounted 启动、onBeforeUnmount 清理，用 ref 管理状态并配合 watch 实现可控启停，最终封装为可复用的组合式函数。
在组合式 API 中处理定时器，核心是“启动于挂载后、清理于卸载前”，同时避免内存泄漏和竞态问题。关键不在于写定时器本身，而在于把它完整地绑进组件的生命周期链路里。
onMounted 启动定时器，确保 DOM 就绪
定时器常需操作 DOM（比如倒计时显示）或依赖响应式状态，必须等组件真实挂载后才安全执行：
- 不要在 setup 顶层直接启动 setInterval，此时 DOM 还未生成，且若组件被条件渲染或延迟加载，可能提前执行
- 在 onMounted 中调用启动函数，既保证 DOM 可访问，也符合 Vue 的执行时序
- 若定时器逻辑复杂（如轮询 + 错误重试），建议封装为独立函数，便于测试和复用
onBeforeUnmount 清理定时器，防止内存泄漏
这是最容易被忽略但最关键的一环。组件卸载后若定时器仍在运行，会持续触发回调、占用内存、甚至修改已销毁组件的状态：
- 必须使用 onBeforeUnmount（而非 onUnmounted）清除定时器，因为它是清理资源的“黄金时机”——此时组件实例仍可用，但 DOM 即将移除
- 保存 setInterval 返回的 ID 到局部变量（如 let timerId = null），并在清理时调用 clearInterval(timerId)
- 如果多个定时器共存，可用数组统一管理，遍历清除
结合 ref 和 watch 实现可控启停与状态同步
纯定时器只是执行逻辑，真正需要的是它与 UI 状态联动：
- 用 ref 管理计时值（如 const count = ref(10)），让视图自动响应变化
- 若需根据 props 或外部状态动态控制定时器（如暂停/恢复/重置），可配合 watch 监听变化并调用启停逻辑
- 避免在 onUpdated 中操作定时器——它在每次更新后都触发，极易造成重复启动或混乱
封装为可复用的组合式函数（Composable）
当倒计时、轮询、心跳等定时逻辑在多个组件中重复出现，应抽离为独立函数：
- 函数内部自行调用 onMounted 和 onBeforeUnmount，封装完整生命周期行为
- 返回值统一用 ref 包裹状态（如 { count, isActive, start, pause, reset }），组件解构后仍保持响应性
- 接收参数时，若传入 ref，用 watch 显式监听；若传入普通对象，可用 watchEffect 自动追踪其属性变化
