可以使用 vue-virtual-scroll-list 库来实现长列表优化。该库使用虚拟滚动技术，只渲染视口内可见的部分，从而减少 DOM 元素的数量，提高性

<template>
  <div>
    <virtual-list :size="50" :remain="20" :bench="20" :direction="'y'" :items="items">
      <template v-slot="{ item }">
        <div>{{ item }}</div>
      </template>
    </virtual-list>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: {
    VirtualList
  },
  data() {
    return {
      items: []
    }
  },
  mounted() {
    // 初始化长列表数据
    for (let i = 0; i < 10000; i++) {
      this.items.push(i)
    }
  }
}
</script>