Vue3页面停留时如何持续刷新数据并在离开后自动停止调用？

你当前的无终止递归问题核心是组件卸载时没有中断递归调用链，除了手动维护标记位之外，有两种更简洁的实现思路，代码量更小也更易维护：

原生实现（无额外依赖） #

把递归调用的延时器ID存下来，在组件onUnmounted生命周期直接清除延时器即可，不需要额外加状态判断：

import { onMounted, onUnmounted } from 'vue'

let pollTimer = null
let abortController = null

onMounted(() => {
  getStatus()
})

// 组件卸载时直接清除待执行的延时任务，递归链自动中断
onUnmounted(() => {
  clearTimeout(pollTimer)
  // 同时中断正在发送的请求，避免离开页面后请求返回报错
  abortController?.abort()
})

async function getStatus() {
  abortController = new AbortController()
  try {
    // 替换成你的实际数据请求逻辑，传入signal支持中断请求
    // const res = await fetch('/xxx/api/status', { signal: abortController.signal })
    // 处理返回数据
  } catch (err) {
    // 主动中断的请求不需要抛错
    if (err.name !== 'AbortError') console.error(err)
  }
  // 存下延时器ID，等请求返回后再设置下一次调用，避免请求堆叠
  pollTimer = setTimeout(getStatus, 3000) // 3000为轮询间隔，按需求调整
}

如果你不需要等待上一次请求返回、要固定间隔发起轮询，把setTimeout换成setInterval即可，卸载时调用clearInterval清除对应ID就行。

通用组合式封装（适合多场景复用） #

如果项目里有多个页面需要轮询逻辑，可以把上述逻辑抽成可复用的组合式函数，组件侧不需要重复写卸载清理逻辑：

// 封装成通用hook: usePolling.js
import { onUnmounted, ref } from 'vue'

export function usePolling(requestFn, interval = 3000) {
  const timer = ref(null)
  const abortController = ref(null)
  const isRunning = ref(false)

  const run = async () => {
    if (!isRunning.value) return
    abortController.value = new AbortController()
    try {
      await requestFn(abortController.value.signal)
    } catch (err) {
      if (err.name !== 'AbortError') throw err
    }
    timer.value = setTimeout(run, interval)
  }

  const start = () => {
    if (isRunning.value) return
    isRunning.value = true
    run()
  }

  const stop = () => {
    isRunning.value = false
    clearTimeout(timer.value)
    abortController.value?.abort()
  }

  // 组件卸载时自动停止轮询，不需要组件手动处理
  onUnmounted(stop)

  return { start, stop, isRunning }
}

组件中使用时只需要传入轮询执行的方法即可：

import { onMounted } from 'vue'
import { usePolling } from './usePolling'

const { start } = usePolling(async (signal) => {
  // 替换成实际的状态请求逻辑
  // const res = await fetch('/xxx/api/status', { signal })
  // 赋值给页面状态
}, 3000)

onMounted(() => {
  start()
})

• 这种封装方式把清理逻辑收敛在hook内部，业务组件不需要关心轮询的销毁逻辑，也不用手动维护标记变量，代码更简洁也不容易出内存泄漏问题。

内容的提问来源于stack exchange，提问作者Marius