窗口焦点重新拉取
如果用户离开你的应用后又返回，且查询数据已过期，TanStack Query 会在后台自动为你请求新鲜数据。你可以通过 refetchOnWindowFocus 选项全局或按查询禁用此行为：
全局禁用
JavaScript
1const vueQueryPluginOptions: VueQueryPluginOptions = {2 queryClientConfig: {3 defaultOptions: {4 queries: {5 refetchOnWindowFocus: false,6 },7 },8 },9}10app.use(VueQueryPlugin, vueQueryPluginOptions)按查询禁用
TypeScript
1useQuery({2 queryKey: ['todos'],3 queryFn: fetchTodos,4 refetchOnWindowFocus: false,5})自定义窗口焦点事件
在极少数情况下，你可能希望自行管理触发 TanStack Query 重新验证的窗口焦点事件。为此，TanStack Query 提供了 focusManager.setEventListener 函数，它向你提供一个回调函数——该函数应在窗口获得焦点时被调用，并允许你自行设置事件监听器。调用 focusManager.setEventListener 时，先前设置的处理程序（大多数情况下为默认处理程序）会被移除，改用你新提供的处理程序。例如，以下是默认处理程序：
TypeScript
1focusManager.setEventListener((handleFocus) => {2 // Listen to visibilitychange3 if (typeof window !== 'undefined' && window.addEventListener) {4 const visibilitychangeHandler = () => {5 handleFocus(document.visibilityState === 'visible')6 }7 window.addEventListener('visibilitychange', visibilitychangeHandler, false)8 return () => {9 // Be sure to unsubscribe if a new handler is set10 window.removeEventListener('visibilitychange', visibilitychangeHandler)11 }12 }13})管理焦点状态
TypeScript
1import { focusManager } from '@tanstack/vue-query'2 3// Override the default focus state4focusManager.setFocused(true)5 6// Fallback to the default focus check7focusManager.setFocused(undefined)故障排查
如果返回标签页时过期的查询未重新拉取，请检查 Chrome 开发者工具中是否启用了 Emulate a focused page（模拟页面已获得焦点）选项。该设置会使 document.visibilityState 保持为 visible，并阻止 visibilitychange 事件触发，而 TanStack Query 正是依赖该事件实现默认的焦点处理逻辑。
请在开发者工具的 Rendering（渲染）面板中禁用 Emulate a focused page，然后切换到其他标签页再返回，以测试窗口焦点重新拉取功能。更多详情请参阅 Chrome DevTools 文档。