vue实现100000条数据，通过虚拟列表进行展示

data(){
    return{
        list:[
          { id: 1, name: "小明" },
          { id: 2, name: "小李" },
          { id: 3, name: "小黑" },
          { id: 4, name: "小蓝" },
          { id: 5, name: "小红" }],
           lastData:[],   // 最终数据
           ArraytData:[], // 初始化object数据
           Id:'',         // 每一项数据的id
           Name:''        // 每一项数据的名字
    }
},
   mounted() {

        
     
          this.list.forEach(item => {
            
             this.Id = item.id
             this.Name = item.name
             this.ArraytData.push({ id: this.Id, name: this.Name })
          });
          
        
        setTimeout(() => {
          this.blockLoading(this.ArraytData, this)
        }, 0)
      },
      methods: {
        blockLoading(originData, that) {
            //初始化数组数据的长度
          let total = originData.length
          // 一次插入 200 条
          let once = 20
          //每条记录数据的索引
          let index = 0
          //循环加载数据
          function loop(curTotal, curIndex, data) {
            // 先判断初始化的数据是否等于0，假如等于就不执行
            if (curTotal <= 0) {
              return false
            }
            //每页多少条 少于once 我们就取值
            let pageCount = Math.min(curTotal, once)
            window.requestAnimationFrame(function () {
                //curIndex每条数据的索引号
              for (let i = curIndex; i < curIndex + pageCount; i++) {
                that.$set(that.lastData, i, data[i])
              }
              loop(curTotal - pageCount, curIndex + pageCount, data)
            })
          }
          loop(total, index, originData)
        },
      },