vite+vue渲染十万条数据

 

 整体代码

<script setup>

import axios from 'axios'
import { ref } from 'vue'

const arr = ref([])
const arr2 = ref([])

const doclick = () => {
  axios.get('/api/list').then(res => {

    console.log(res);
    arr.value = res.data
    console.log(arr.value, '996');
    render()

  })


  function render(num = 0) {
    const total = arr.value.length
    const max = num + 200
   // console.log(arr2.value.length, 'ccccccccccccccccccccccccc');
    if (max > total) return

    setTimeout(() => {
      const ii = num ? num + 1 : 0
      // console.log(ii, 'mmmmmmm');
      for (let i = ii; i - 1 < max; i++) {
        arr2.value.push(arr.value[i])
        
       // console.log(i,'iiiiiiiiiiiiiiiiiii');
      }
      
      render(num += 200)
    }, 50)
    
  }
}





</script>

点击调用函数，并使用延时器，每次push数据200条，并进行递归

遇到的问题就是：递归进入，i如果直接等于num的话，数据从200进行再次push，

原因是：第一次push到200条，之后进入递归，又从200条开始，导致下标200的数据会被push到数组2次，以此类推

加判断 赋值新的 ii 作为起始下标

再次遇到问题 

ii因为每次都是num+1  所以ii实际会大1，所以结束条件i < max ，i自增到99999会结束循环，所以在结束条件i 需要 -1

最后展示效果