Vue 渲染大量dom卡顿，vue-virtual-scroller 使用说明 vue3 vue2

它主要能实现的功能是，能处理巨量列表的展示。原理是它只把展示给用户的那部分渲染出来，比如滚到上面的 dom 就回收掉。这个跟 iOS 的 ReuseableCell 很像，那个是复用的。

它会生成一个很长的列表，然后滚动这个列表

GitHub - Akryum/vue-virtual-scroller: ⚡️ Blazing fast scrolling for any amount of data

 recycle-scroller 组件必须设置高度，自己计算也好，提前指定也好，必须设置，不然会出错。

vue2 使用 vue-virtual-scroller

 

npm i vue-virtual-scroller

main.js 中引入
import "vue-virtual-scroller/dist/vue-virtual-scroller.css" // 引入它的 css
import VueVirtualScroller from "vue-virtual-scroller" // 引入它
Vue.use(VueVirtualScroller) // use 它
 

<div class="many">
      <recycle-scroller class="virtual-list" :buffer="1000" style="height: 500px" :item-size="40" key-field="id"
        :items="tableData">
        <template v-slot="{ item }">
          <div>
            <span>{{ item.id }}{{ item.name }}</span>
            <el-button type="primary" @click="vir(item)">默认按钮</el-button>
            <myp ref="son" :num="num"></myp>
          </div>
        </template>
      </recycle-scroller>
    </div>


mounted() {
    for (let i = 0; i < 100000; i++) {
      this.tableData.push({ id: i, name: Math.random() })
    }
}

  data() {
    return {
      tableData: []
}
}

vue3 使用 vue-virtual-scroller

vue3 中使用的组件跟 vue2 只有引入的时候不同，其它都一样。

npm i vue-virtual-scroller@next

import "vue-virtual-scroller/dist/vue-virtual-scroller.css" // 引入它的 css
import VueVirtualScroller from "vue-virtual-scroller" // 引入它
app.use(VueVirtualScroller) // use 它
ts在.d.ts的文件中声明declare module 'vue-virtual-scroller'

<recycle-scroller class="virtual-list" :buffer="1000" style="height: 500px" :item-size="60" key-field="id"
    :items="vd">
    <template v-slot="{ item }">
      <div>
        <span>{{ item.id }}{{ item.name }}</span>
        <el-button type="primary" @click="vir(item)">默认按钮</el-button>

      </div>
    </template>
  </recycle-scroller>



const vd = reactive<any>([])
onMounted(() => {
  for (let i = 0; i < 100000; i++) {
    vd.push({ id: i, name: Math.random() })
  }
})

Props 和 Slot 说明

prop    解释

如果你指定的 keyField 存在重复的情况，就会出现列表内容缺失的情况 

v-slot 可以为以下几个值

prop	解释
item	展示中的元素个体
index	返回每个元素在 items 中的位置 inex
active	元素是否处于 active 状态

目前能显示 60万条，多了就不显示了。
————————————————
版权声明：本文为CSDN博主「十月ooOO」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/KimBing/article/details/119280520