当前位置：首页 > VUE

vue实现长列表加载

2026-02-23 20:50:02VUE

实现长列表加载的方法

在Vue中实现长列表加载可以通过多种方式优化性能，避免一次性渲染大量DOM节点导致页面卡顿。以下是几种常见的方法：

使用虚拟滚动（Virtual Scrolling）

虚拟滚动技术只渲染可视区域内的列表项，大幅减少DOM节点数量。推荐使用现成库如vue-virtual-scroller：

vue实现长列表加载

npm install vue-virtual-scroller

示例代码：

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.text }}</div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller },
  data() {
    return {
      list: [] // 大数据列表
    }
  }
}
</script>

滚动加载（Infinite Scroll）

监听滚动事件，当接近底部时加载更多数据：

vue实现长列表加载

<template>
  <div class="list-container" @scroll="handleScroll">
    <div v-for="item in visibleItems" :key="item.id">{{ item.text }}</div>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [],
      visibleItems: [],
      pageSize: 20,
      currentPage: 1,
      loading: false
    }
  },
  methods: {
    handleScroll(e) {
      const bottom = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 100
      if (bottom && !this.loading) {
        this.loadMore()
      }
    },
    loadMore() {
      this.loading = true
      // 模拟异步加载
      setTimeout(() => {
        const newItems = this.allItems.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        )
        this.visibleItems = [...this.visibleItems, ...newItems]
        this.currentPage++
        this.loading = false
      }, 500)
    }
  }
}
</script>

分页加载

对于非滚动场景，可以使用传统分页控制：

<template>
  <div>
    <div v-for="item in currentPageItems" :key="item.id">{{ item.text }}</div>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span>Page {{ currentPage }} of {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    currentPageItems() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.allItems.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.allItems.length / this.pageSize)
    }
  },
  methods: {
    prevPage() {
      this.currentPage--
    },
    nextPage() {
      this.currentPage++
    }
  }
}
</script>

使用Web Worker处理大数据

对于特别大的数据集，可以在Web Worker中进行数据处理：

// worker.js
self.onmessage = function(e) {
  const { data, page, pageSize } = e.data
  const result = data.slice((page - 1) * pageSize, page * pageSize)
  postMessage(result)
}

// Vue组件
export default {
  methods: {
    loadData(page) {
      const worker = new Worker('./worker.js')
      worker.postMessage({
        data: this.bigData,
        page,
        pageSize: 20
      })
      worker.onmessage = (e) => {
        this.visibleItems = e.data
        worker.terminate()
      }
    }
  }
}