认准虚拟列表选择器，给我10万，我看行！

2023-12-23 02:10:28

随着Vue3的成为正式版本，Element-plus也有了稳定版，那今天我们主要是讲一个功能。现在，先简单看一下Element-plus中出现的虚拟列表选择器。顾名思义，虚拟列表选择器，相比于之前的列表，有了非常大的改变。之前的列表，是所有的列表项都挂在真实DOM树上的，因此，很容易造成内存开销过大，页面卡顿的现象。随着虚拟列表选择器的出现，可谓是解决了这一难题。它采用的是虚拟滚动的方式，只有当前视口内的列表项，才会渲染到真实的DOM树上，其余的列表项都是虚拟的，只是存在于内存当中。从而大大减小了内存的开销，提高了页面的性能，增强了用户的使用体验。

虚拟列表选择器的优点

1. 性能优化

虚拟列表选择器采用虚拟滚动的方式，极大地提高了页面的性能。它通过减少真实DOM树上的列表项数量，来减少渲染时间，从而提升页面的加载速度。

2. 内存开销减小

由于虚拟列表选择器只将当前视口内的列表项渲染到真实的DOM树上，其他列表项都是虚拟的，只存在于内存当中。因此，与传统列表相比，虚拟列表选择器显著地减小了内存开销，使页面更加轻量。

3. 用户体验增强

虚拟列表选择器通过虚拟滚动的方式，使页面滚动更加流畅，增强了用户的使用体验。用户可以更轻松地浏览大量列表项，而不会遇到卡顿或延迟。

虚拟列表选择器的局限性

1. 浏览器兼容性

虚拟列表选择器是Element-plus中引入的新功能，因此对浏览器的兼容性可能会存在一些问题。在某些旧版本的浏览器中，虚拟列表选择器可能无法正常工作。

2. 复杂度增加

虚拟列表选择器使用虚拟滚动的方式来提高性能，但这也增加了实现的复杂度。开发人员需要更深入地理解虚拟滚动的原理，才能正确地使用虚拟列表选择器。

如何使用虚拟列表选择器

要使用虚拟列表选择器，你需要在你的Vue组件中安装Element-plus并导入VirtualList组件。然后，你可以使用v-for指令来循环你的数据源，并将其渲染到VirtualList组件中。

<template>
  <el-virtual-list :data="listData">
    <template #default="scope">
      <li>{{ scope.item.name }}</li>
    </template>
  </el-virtual-list>
</template>

<script>
import { ref } from 'vue'
import { ElVirtualList } from 'element-plus'

export default {
  components: { ElVirtualList },
  setup() {
    const listData = ref([
      { name: 'Item 1' },
      { name: 'Item 2' },
      { name: 'Item 3' },
      // ...
    ])

    return {
      listData,
    }
  },
}
</script>