TRAE-AI编程
在 Vue3 里做轮询，也就是用 Vue3 轮询 的方式定时拉数据，最省事的办法是把定时器封装成一个组合式函数（hook），用 setInterval 周期性发请求，并在组件卸载时清掉。本文先给结论，再讲参数设计与三个最容易漏的注意点。
很多人写轮询时直接把 setInterval 写进 onMounted，结果遇到页面切换后定时器还在跑、请求越积越多、甚至内存泄漏。把轮询逻辑抽成一个可复用的组合式函数，既能统一控制开关，也能避免重复代码在不同组件里散落。下面用一个「每隔几秒拉一次列表」的场景，把轮询逻辑讲透。
所谓轮询逻辑，就是「按固定间隔重复执行某个动作，拿到新数据就更新视图，出错就暂停或重试」。它和 WebSocket 这类服务端推送不同，轮询是客户端主动、定时去问，简单可控，但代价是空转请求和延迟。理解这一点，才能决定要不要轮询。
先看结论
封装轮询 hook 时，至少暴露 start / stop / immediate 三个能力，并在 onUnmounted 里无条件 clearInterval。最容易漏的三件事是：组件卸载没清定时器、依赖变化后没重启、以及请求还在飞时又触发了下一次。把这三处守住，轮询逻辑就稳了。
一、最小场景与预期行为
假设我们要做一个「实时订单看板」，每 5 秒拉一次最新订单列表。预期是：组件挂载后立刻拉一次，之后每 5 秒拉一次；用户切走页面（组件卸载）后停止拉取；组件再次进入时重新开始。
明确这个预期，就能反推出 hook 需要哪些参数：interval（间隔毫秒）、immediate（是否立即执行一次）、以及一个返回最新数据的响应式变量。轮询逻辑围绕「启停 + 定时 + 清理」三件事展开。先补一下 Vue3 教程 中组合式 API 的基础概念，再往下看会更顺。
二、先用最稳的实现：组合式函数封装
最稳的写法是用一个组合式函数把轮询逻辑包起来，内部管理定时器句柄：
import { ref, onUnmounted } from 'vue'
export function usePolling(fetchFn, options = {}) {
const { interval = 5000, immediate = true } = options
const data = ref(null)
const loading = ref(false)
let timer = null
async function tick() {
loading.value = true
try {
data.value = await fetchFn()
} finally {
loading.value = false
}
}
function start() {
if (immediate) tick()
timer = setInterval(tick, interval)
}
function stop() {
if (timer) clearInterval(timer)
timer = null
}
onUnmounted(stop)
return { data, loading, start, stop }
}
这个组合式函数的核心就是轮询逻辑本身：用 setInterval 驱动 tick，用 onUnmounted 确保组件卸载时 stop。组件里调用 usePolling(loadOrders, { interval: 5000 }) 即可，无需关心定时器细节。更完整的组件实战在 Vue3 课程 里有系统讲解。顺带一提，组合式函数必须「在 setup 中同步调用」才能拿到组件生命周期，所以 usePolling 要写在 <script setup> 顶层，不要包在条件判断或回调里，否则 onUnmounted 不会注册，清理也就失效了。
三、参数设计与取舍
参数怎么定，取决于你的轮询逻辑有多复杂。最小可用版本只要 interval；但生产里通常还要这些：
immediate：首屏是否立即拉一次，避免白屏等待第一个间隔。enabled：是否允许暂停，比如页面隐藏（visibilitychange）时停掉以省资源。onError：请求失败时的处理，是静默重试、指数退避还是直接停止。
取舍点在于：参数越多越灵活，但调用方越容易用错。建议把「常用三件套」做成必填或默认值，把「高级控制」做成可选。关于组合式函数与 AI 编程工具里钩子机制的区别，概念容易混，可参考 AI 编程 Codex Hooks 了解差异，但 Vue 这里的 hook 纯粹是组件内逻辑复用。onError 的设计里，指数退避（1s、2s、4s…）比固定间隔重试更友好，能在后端抖动时快速恢复又不打爆接口；但要注意设一个最大重试次数，避免无限重试拖垮前端。
四、三个最容易漏的注意点
坑一：组件卸载不清理。忘了 onUnmounted(stop)，组件销毁后 setInterval 还在跑，请求持续发出，控制台报错且内存泄漏。务必在卸载时 clearInterval。
坑二：请求还在飞，下一次 tick 又触发。如果单次请求耗时超过 interval，会出现并发请求堆积。解决思路是「上一次没回来就跳过本次」，用一个 inFlight 标志位拦住：
let inFlight = false
async function tick() {
if (inFlight) return
inFlight = true
try { data.value = await fetchFn() } finally { inFlight = false }
}
坑三：依赖变化后没重启。如果你的 fetchFn 依赖某个响应式参数（比如当前选中用户 id），参数变了但定时器没重启，就会一直拉旧数据。解决方案是 watch 参数变化后先 stop 再 start，让轮询逻辑跟着依赖走。如果依赖是多个，可以用 watch([a, b], ...) 一次性监听；记得把首次拉取交给 watch 的 immediate 或手动在 start 里先 tick，避免依赖变了却跳过了首拉。
动手验证清单
想确认你的轮询 hook 真的稳，可以按下面步骤验证：
- 安装/配置：用 Vite 建一个最小 Vue3 项目，引入上面的组合式函数。
- 运行：在组件里调用
usePolling，打开浏览器网络面板观察请求频率。 - 检查：每 interval 毫秒应有一次请求；切换路由后请求应停止。
- 预期：挂载即拉一次，之后按间隔拉取，卸载即停。
- 验证：手动把 interval 调小（如 1000ms），确认无重复堆积请求。
- 失败处理：若卸载后仍报错，检查是否漏写 onUnmounted；若请求堆积，加 inFlight 标志。
- 注意：以上示例基于 Vue3 组合式 API，未在浏览器逐条运行，请以你的实际工程为准。
常见问题
Q：Vue3 轮询一定要自己写 hook 吗，不能直接用定时器吗？
可以直接写，但把所有轮询逻辑散落在 onMounted 里，多组件复用时会重复且容易漏清理。封装成组合式函数能统一开关与卸载清理，是更稳的做法。
Q：组件卸载时怎么保证定时器一定被清掉？
在组合式函数里用 onUnmounted 注册清理函数，无条件调用 clearInterval。只要 hook 是在 setup 中同步调用的，卸载钩子就会生效，组件卸载时停止轮询。
Q：请求比间隔还慢怎么办，会不会越积越多？
会。用 inFlight 标志位在上一轮请求未返回时跳过本次 tick，避免并发堆积。这是轮询逻辑里最容易被忽略的一环，建议默认加上。
总结
在 Vue3 里做轮询，把定时器封装成一个组合式函数是最稳的路径：用 setInterval 驱动、用 onUnmounted 清理、用 inFlight 防堆积、用 watch 处理依赖变化。轮询逻辑的三个核心风险——卸载未清理、请求堆积、依赖变化不重启——守住这三点，你的轮询 hook 就能安全复用。参数上优先暴露 interval 与 immediate，高级控制在需要时再补。
