vue3 实现一个 虚拟列表

Vue 3提供了一个新的组件API，使得构建虚拟列表变得更加容易。下面是一个简单的实现示例：

1. 安装依赖：

npm install vue@next
npm install vue3-virtual-scroll-list

2. 在组件中使用虚拟列表：

<template>
  <virtual-scroll-list
    :size="50"
    :remain="20"
    :data-key="'id'"
    :data-sources="items"
    @scroll="handleScroll"
  >
    <template v-slot="{ data }">
      <div v-for="item in data" :key="item.id">{{ item.text }}</div>
    </template>
  </virtual-scroll-list>
</template>

<script>
import { ref } from 'vue'
import VirtualScrollList from 'vue3-virtual-scroll-list'

export default {
  components: {
    VirtualScrollList,
  },
  setup() {
    const items = ref([])

    // 初始化数据
    for (let i = 0; i < 10000; i++) {
      items.value.push({
        id: i,
        text: `Item ${i}`,
      })
    }

    const handleScroll = (scrollTop) => {
      // 处理滚动事件
      console.log(scrollTop)
    }

    return {
      items,
      handleScroll,
    }
  },
}
</script>

在这个示例中，我们使用 `vue3-virtual-scroll-list` 组件来实现虚拟列表。这个组件需要传入一些参数，包括：

- `size`：每个项的高度
- `remain`：上下额外渲染项的数量
- `data-key`：数据中每个项的唯一标识符
- `data-sources`：数据源
- `scroll`：滚动事件的回调函数

在模板中，我们使用插槽来渲染每个项。同时，组件还会将已经渲染的项缓存起来，以提高性能。

在 `setup` 函数中，我们初始化了一个 `items` 的响应式变量，并将它传入 `data-sources` 中。我们还定义了一个 `handleScroll` 函数来处理滚动事件。