[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> ```