vue项目使用vue-virtual-scroll-list虚拟滚动超多千万条数据 cv可用案例

当我们有大量数据需要显示在列表中时，传统的滚动列表会将所有数据渲染到 DOM 中，导致性能下降和内存占用增加。虚拟滚动列表通过仅渲染当前视窗内可见的一小部分数据，动态地根据滚动位置更新列表内容，从而实现更高效的列表渲染。

vue-virtual-scroll-list 是一个用于 Vue.js 的虚拟滚动列表组件。它提供了一种优化大量数据列表的方式，通过仅渲染当前可见区域的部分数据来节省性能和内存资源。

使用 vue-virtual-scroll-list 可以显著提高大型列表的渲染性能，特别是在移动端或数据量较大的情况下，能够更流畅地滚动和浏览列表内容。

npm i vue-virtual-scroll-list

父组件

<template>
  <div>
    <virtual-list style="height: 480px; overflow-y: auto;"
      :data-key="'uid'"  //必填
      :data-sources="items"  //必填
      :data-component="itemComponent"  //必填
    />
  </div>
</template>

<script>
  import Item from './Item'
  import VirtualList from 'vue-virtual-scroll-list'
  export default {
    name: 'root',
    data () {
      return {
        itemComponent: Item,
        items: []
      }
    },
    components: { 'virtual-list': VirtualList },
    created () {
      // 生成100000个数据
    for (let i = 1; i <= 100000; i++) {
      this.items.push({
        uid: 'unique_'+i,
        text: `Item ${i}`
      })
    }
    },
  }
</script>

子组件

<template>
  <div>{{ index }} - {{ source.text }}</div>
</template>

<script>
  export default {
    name: 'item-component',
    props: {
      index: { // index of current item
        type: Number
      },
      source: { // here is: {uid: 'unique_1', text: 'abc'}
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>