Vue Virtual

@tanstack/vue-virtual 适配器是核心虚拟化逻辑的一个封装。

`useVirtualizer`

function useVirtualizer<TScrollElement, TItemElement = unknown>(
  options: PartialKeys<
    VirtualizerOptions<TScrollElement, TItemElement>,
    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
  >,
): Virtualizer<TScrollElement, TItemElement>

此函数返回一个标准的 Virtualizer 实例，该实例配置为与 HTML 元素作为滚动元素一起工作。

`useWindowVirtualizer`

function useWindowVirtualizer<TItemElement = unknown>(
  options: PartialKeys<
    VirtualizerOptions<Window, TItemElement>,
    | 'getScrollElement'
    | 'observeElementRect'
    | 'observeElementOffset'
    | 'scrollToFn'
  >,
): Virtualizer<Window, TItemElement>

此函数返回一个基于窗口的 Virtualizer 实例，该实例配置为与窗口作为滚动元素一起工作。

区别

useVirtualizer 和 useWindowVirtualizer 都是 TanStack Virtual 提供的 Hook，用于实现列表虚拟化，但它们之间有一个 核心区别：它们所监听和控制的 滚动元素 (scroll element) 不同。

`useVirtualizer`

用途： 当你的可滚动列表位于一个特定的 HTML 元素（比如一个 div）内部时，使用 useVirtualizer。这是最常见的虚拟化场景。

核心配置：

你需要通过 getScrollElement: () => TScrollElement 选项明确告诉 useVirtualizer 哪个 DOM 元素是负责滚动的容器。通常，你会传入一个 ref 到这个 div 元素。

示例场景：

一个带有固定高度并设置了 overflow: auto 的 div，里面承载着大量行。
表格的 tbody 元素需要虚拟化行。
任何自定义组件，其内部有一个独立的滚动区域。

`useWindowVirtualizer`

用途： 当你的可滚动列表是整个浏览器窗口时，使用 useWindowVirtualizer。这意味着你的列表是页面上唯一（或主要的）滚动内容，并且你希望滚动条是浏览器原生的窗口滚动条。

核心配置：

它不需要你提供 getScrollElement 选项，因为它默认就会将 window 对象作为滚动元素。
它会自动监听 window 的滚动事件和尺寸变化。

示例场景：

一个无限滚动的瀑布流布局，页面本身可以滚动。
一个单页应用，其主要内容区域随着窗口的滚动而虚拟化加载。
你希望整个页面的滚动行为由虚拟器控制。

总结区别

特性	`useVirtualizer`	`useWindowVirtualizer`
滚动元素	特定的 HTML 元素（`div`, `table`, etc.）	浏览器窗口 (`window`)
`getScrollElement`	必需，用于指定滚动容器	不适用（默认就是 `window`）
用例	组件内部的滚动列表、表格行虚拟化、卡片网格	整个页面的无限滚动、博客文章列表、长篇文章阅读页面
控制范围	仅控制指定元素内的滚动和内容呈现	控制整个浏览器窗口的滚动和内容呈现

简单来说，如果你希望在一个局部区域内实现虚拟滚动，就用 useVirtualizer；如果你希望在整个页面上实现虚拟滚动，就用 useWindowVirtualizer。

安装

Virtualizer