[TOC] ## useVirtualList `useVirtualList` 是 Vueuse 库中的一个 Hook，用于优化长列表的渲染性能。当一个列表中包含大量的数据项时，传统的渲染方式会导致页面卡顿或加载缓慢，影响用户体验。而 `useVirtualList` 可以通过只渲染当前可见区域内的项来避免这种情况，从而提高列表的渲染效率和交互体验 ``` <template> <div class="container" v-bind="containerProps" style="background-color: #cccccc;height: 200px;overflow-y: auto"> <div v-bind="wrapperProps"> <div v-for="(item, index) in list" :key="index" class="list-item" :style="{ height: '20px' }" > {{ item }} </div> </div> </div> </template> <script setup> import { useVirtualList } from '@vueuse/core' const { list, containerProps, wrapperProps,scrollTo } = useVirtualList( Array.from(Array(99999).keys()), { // Keep `itemHeight` in sync with the item's row. itemHeight: 22, }, ) //两秒后跳转到 998 索引 setTimeout(()=>{ scrollTo(998) },2000) </script> ```