vue 3 虚拟滚动首选 usevirtuallist 组合式函数，适用于固定高度列表；需严格匹配 css 行高，返回渲染切片与容器属性；动态高度等复杂场景应改用 @tanstack/vue-virtual。
Vue 3 组合式函数处理长列表虚拟滚动，核心是用 useVirtualList 这类轻量、声明式的组合式 API 替代手动计算滚动偏移和渲染区间。它不侵入组件逻辑，只负责数据切片与位置映射，把“该渲染哪几条、撑多高、怎么定位”这些重复工作封装好，开发者专注业务渲染即可。
用 useVirtualList 快速接入虚拟滚动
这是 VueUse 提供的官方组合式函数，适合固定高度、结构清晰的长列表场景：
- 传入原始数据数组（如
Array.from({ length: 99999 }).map((_, i) => ({ id: i, name: `Item ${i}` }))） - 指定
itemHeight（必须与 CSS 中行高严格一致，否则滚动错位） - 可选配置
overscan（默认 5），控制可视区上下额外多渲染几项，防快速滚动时白屏 - 解构返回
list（当前应渲染的 { data, index } 切片）、containerProps（含@scroll和ref）、wrapperProps（含style.height总高度）
手动实现时的关键响应式计算
若需更高定制性（比如动态高度、吸顶、树形缩进），可基于组合式 API 自建逻辑：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
ref存容器 DOM 和scrollTop，onMounted+nextTick获取真实clientHeight - 用
computed实时算：visibleCount = Math.ceil(containerHeight / itemHeight)、startIndex = Math.floor(scrollTop / itemHeight)、endIndex = Math.min(startIndex + visibleCount + buffer, total - 1) - 用
watch监听scrollTop，触发重算；或用useScroll（VueUse）自动绑定 - 渲染时用
transform: translateY(${startIndex * itemHeight}px)定位内容区，避免重排
配合 scroll 定位与防抖提升体验
用户跳转到某条数据（如点击侧边导航）时，需精准滚动且避免高频触发：
- 用
containerRef.value?.scrollTo({ top: targetIndex * itemHeight })实现像素级定位 - 对滚动事件加
useThrottle（如 50ms 间隔），防止scrollTop频繁更新拖慢响应 - 搜索/筛选后，重置
scrollTop = 0并触发一次scrollTo，确保回到顶部
复杂场景优先选专用库
当遇到以下情况，useVirtualList 不再够用，建议切换至 @tanstack/vue-virtual：
- 每行高度不固定（需测量 DOM 或缓存高度）
- 需要分组标题、粘性表头、多列网格布局
- 树状结构展开/折叠导致整体高度动态变化
- 要求 scrollToIndex 精确到某条数据（而非像素），并自动处理缓冲与动画
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
