后端给你10W条数据你怎么优雅的渲染

搭建简易服务端

• 1、yarn global nodemon or npm install -g nodemon
• 2、新建server.js 文件

const http = require("http");
const port = 8000;

http
  .createServer(function (req, res) {
    // 开启Cors
    res.writeHead(200, {
      //设置允许跨域的域名，也可设置*允许所有域名
      "Access-Control-Allow-Origin": "*",
      //跨域允许的请求方法，也可设置*允许所有方法
      "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
      //允许的header类型
      "Access-Control-Allow-Headers": "Content-Type",
    });
    let list = [];
    let num = 0;

    // 生成10万条数据的list
    for (let i = 0; i < 100000; i++) {
      num++;
      list.push({
        src: "https://storage.360buyimg.com/jdc-article/fristfabu.jpg",
        text: `我是${num}号女嘉宾`,
        tid: num,
      });
    }
    res.end(JSON.stringify(list));
  })
  .listen(port, function () {
    console.log("server is listening on port " + port);
  });

<script setup lang="ts">
import axios from "axios";
import { ref, onMounted, computed } from "vue";
const container = ref<HTMLElement>() // container节点
const blank = ref<HTMLElement>() // blank节点
const list = ref<any>([]) // 列表
const page = ref(1) // 当前页数
const limit = 200 // 一页展示
// 最大页数
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// 真实展示的列表
const showList :any[]= computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  console.log("handleScroll__start!!")
  // 当前页数与最大页数的比较
  if (page.value > maxPage.value) return
  const clientHeight = container.value?.clientHeight
  const blankTop = blank.value?.getBoundingClientRect().top
  if (clientHeight === blankTop) {
    // blank出现在视图，则当前页数加1
    page.value++
  }
}
//========data=====
const getList = () => {
  axios
    .get("http://127.0.0.1:8000")
    .then(function (response:any) {
      list.value = response.data;
      console.log(response);
    })
    .catch(function (error:any) {
      console.log(error);
    });
};
//======hook====
onMounted(() => {
  getList();
});
</script>
<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="item in showList" :key="item.tid">
      <!-- <img :src="item.src" /> -->

      <span>序号：{{ item.tid }}-----------------</span>
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>

<style scoped>
</style>