vue3使用RecycleScroller获取数据并显示

<template>
  <recycle-scroller class="virtual-list" :buffer="1000" :prerender="200" style="height: 400px" :item-size="24"
    key-field="id" :items="tableData">
    <template v-slot="{ item, index }">
      <div class="list-item" :key="index">
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.sex }}</span>
      </div>
    </template>
  </recycle-scroller>
  <button @click="btn">生成数据</button>
</template>

<script setup>
import { ref, nextTick } from 'vue';

// 使用 ref 而不是 reactive，tableData 需要是响应式的
const tableData = ref([]);

const btn = () => {
  const newData = [];
  for (let i = 0; i < 100000; i++) {
    newData.push({ id: i, name: Math.random(), sex: Math.random() });
  }

  // 更新 tableData，使用 tableData.value
  tableData.value = newData;
}
</script>

使用RecycleScroller生成数据，一开始是使用const tableData = reactive([])发现渲染不出来，换成使用ref，成功显示数据。

内容来自于chatgpt。