前端vue 怎么做列表的懒加载

在 Vue.js 中实现列表的懒加载（Lazy Loading），通常是为了优化性能，特别是当数据量非常大，一次性加载所有内容可能会导致页面初始化缓慢或内存占用过高时。你可以通过以下步骤来实现：

1. **分页或滚动加载**：
- 使用 `v-for` 的 `chunk-by` 或 `paginate` 特性，例如使用 `vue-infinite-loading` 或者自定义的分页插件，当用户滚动到列表底部时动态请求下一页的数据。

2. **虚拟滚动（Virtual Scrolling）**：
- 如果列表高度远大于视口高度，可以使用第三方库如 `vue-virtual-scroller` 来只渲染当前可见区域的内容，其余部分则按需加载。

3. **预加载策略**：
- 可以在滚动到某个位置时开始加载下一个组件，比如距离屏幕底部还有一定距离时就开始发起请求。

4. **响应式数据源**：
- 将数据存储在一个响应式的数组或Promise中，并在需要时更新它。当数据准备好时，再将其插入到列表中。

<template>
  <div v-if="loading">
    <!-- 加载中提示 -->
  </div>
  <ul ref="list" v-if="!loading">
    <li v-for="(item, index) in displayedItems" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 懒加载的数据源
      displayedItems: [],
      loading: true,
      lastItemIndex: 0,
    };
  },
  mounted() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      this.loading = true;
      // 发起请求获取更多数据
      fetchNextData().then((newItems) => {
        this.items.push(...newItems);
        // 确保仅显示可视范围内的数据
        this.displayedItems = this.items.slice(this.lastItemIndex);
        this.lastItemIndex += newItems.length;
        this.loading = false;
      });
    },
  },
};
</script>