vue1000条数据 先加载100条后续 每隔一秒加载100条

Vue.js 中处理大量数据通常会采用分页加载的方式，特别是当数据量超过用户屏幕可视区域的时候。对于一次性加载1000条数据然后每秒加载100条的操作，可以采用轮询（polling）或者使用 Vue 的`v-if`和`v-for`结合`async`和`await`来实现。

以下是简单的一个示例：

<template>
  <div v-for="(item, index) in displayedItems" :key="index">
    <!-- 显示当前已加载的数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据数组
      currentPage: 1,
      itemsPerPage: 100,
      lastLoadAt: null, // 上一次加载的时间
    };
  },
  mounted() {
    this.fetchData(); // 初始化加载第一页数据
  },
  methods: {
    fetchData() {
      this.lastLoadAt = new Date();
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;

      fetch('your-api-url')
        .then(response => response.json())
        .then(data => {
          this.allData = [...this.allData, ...data.slice(start, end)];
          // 更新显示列表
          this.displayedItems = this.allData.slice(0, this.itemsPerPage);
        })
        .catch(error => console.error('Error:', error));
    },
    async loadMoreData() {
      if ((new Date() - this.lastLoadAt) >= 1000) { // 每隔一秒钟检查是否需要加载更多
        await this.fetchData();
      }
    },
  },
  created() {
    setInterval(this.loadMoreData, 1000); // 设置定时器每秒触发loadMoreData
  },
};
</script>

在这个例子中，我们首先加载前100条数据，然后设置一个定时器，在每秒检查是否还有更多数据需要加载。如果已经超过1秒未再次加载，就执行`fetchData()`函数获取下一页数据并更新显示内容。注意这只是一个基本的实现，实际项目中可能还需要考虑错误处理和用户体验优化。