窗口焦点影响的数据刷新 Window Focus Refetching

如果用户在短暂离开后回来时，数据已被标记为过时，那么 React Query 会在后台自动为你请求新的数据 。 你可以使用 refetchOnWindowFocus 选项在全局或单个查询中禁用此选项。

全局禁用 ​

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
      },
    },
  },
};
app.use(VueQueryPlugin, vueQueryPluginOptions);

单独禁用 ​

useQuery(["todos"], fetchTodos, { refetchOnWindowFocus: false });

自定义窗口的 Focus 事件 ​

在极少数情况下，你可能想要自己管理窗口的 Focus 事件，这些事件会触发 React Query 的重新验证。 为此，React Query 提供了一个 focusManager.setEventListener 函数，该函数提供了当窗口聚焦时应触发的回调，并允许你设置自己的事件。 当调用 focusManager.setEventListener 时，先前设置的处理函数将被删除（在大多数情况下将是默认的处理函数），而将使用新的处理函数。 例如，这是默认处理程序：

focusManager.setEventListener((handleFocus) => {
  // 监听 visibilitychange 和 focus 事件
  if (typeof window !== "undefined" && window.addEventListener) {
    window.addEventListener("visibilitychange", handleFocus, false);
    window.addEventListener("focus", handleFocus, false);
  }

  return () => {
    // 如果设置了新的处理程序，确保取消订阅
    window.removeEventListener("visibilitychange", handleFocus);
    window.removeEventListener("focus", handleFocus);
  };
});

忽略 iframe 的 Focus 事件 ​

替换焦点处理函数的一个很好的用例是 iframe 的事件。 iframe 在检测窗口焦点方面存在问题。当你在应用中聚焦或使用 iframe 时，iframe 会多次触发事件(double-firing events)和假阳性事件(false-positive events)。 如果遇到这种情况，你应该使用一个事件处理函数来尽可能地忽略它们。例如使用 这个 Gist ：

import { focusManager } from "@tanstack/vue-query";
import onWindowFocus from "./onWindowFocus"; // The gist

focusManager.setEventListener(onWindowFocus); // Boom!

管理焦点状态 ​

import { focusManager } from "@tanstack/vue-query";

// 覆盖默认的焦点状态
focusManager.setFocused(true);

// 回退到默认的焦点检查
focusManager.setFocused(undefined);

陷阱和警告 ​

一些浏览器 API 产生的对话窗口，如 alert() 或文件上传对话框( <input type="file" /> )，也可能在关闭之后触发基于窗口焦点的数据获取动作。 这可能会导致某些不必要的副作用。