vue虚拟列表实现（简单详细）项目优化必备

首先定义一下概念！

Vue虚拟列表（Virtual List）可以在大量数据的场景下，提高页面渲染性能和用户体验。其实现方式是只渲染当前可视区域内的数据部分，而非全部渲染数据，可以通过监听滚动事件，动态计算当前可视区域的起始索引和结束索引，并只渲染这一部分的数据。

简单来说就是在固定数量的dom节点上去对大量的返回数据进行渲染（dom节点具体有多少还是取决于前端列表需要展示的数量），例如，一个列表，需要接收后端返回的10w条数据，此时我们只需要10个dom节点来展示，那么这10w条数据，会根据滚动事件在这10个dom节点上来进行视图层的刷新渲染，从而实现虚拟列表的展示

代码放下面！（下方是组件哈，可以自己引用一下，非常简单）

1. 在模板中

<div class="list-container">
  <div class="list-item" 
       v-for="(item, index) in displayedItems" 
       :key="startIndex + index"
       :style="{ height: itemHeight + 'px' }">
    <!-- 渲染每一项的内容 -->
  </div>
</div>

2. 列表组件中，定义如下 props 和 data

props: {
  // 列表每一项数据的固定高度
  itemHeight: {
    type: Number,
    required: true,
  },
  // 列表展示的数据源
  items: {
    type: Array,
    required: true,
  },
  // 可视区域的高度
  viewHeight: {
    type: Number,
    required: true,
  },
},
data() {
  return {
    // 当前可视区域首位元素的索引
    startIndex: 0,
    // 当前可视区域末尾元素的索引
    endIndex: 0,
    // 实际渲染的数据
    displayedItems: [],
  }
},

3. 组件的mounted和watch钩子中，初始化和更新当前可视区域数据

mounted() {
  this.updateVisibleData()
  window.addEventListener('scroll', this.updateVisibleData)
},
watch: {
  items() {
    this.startIndex = 0
    this.endIndex = 0
    this.updateVisibleData()
  },
},
methods: {
  // 计算当前可视区域的起始索引和结束索引
  updateVisibleData() {
    const scrollTop = window.pageYOffset
    const visibleHeight = this.viewHeight + scrollTop
    const startIndex = Math.floor(scrollTop / this.itemHeight)
    const endIndex = Math.ceil(visibleHeight / this.itemHeight)

    if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
      this.startIndex = startIndex
      this.endIndex = endIndex
      this.displayedItems = this.items.slice(startIndex, endIndex)
    }
  },
}