优化ASelect在数据量很大情况下显示卡顿问题

优化ant-design-vue的a-select下拉框在几万条数据量情况下，显示卡顿的问题。

<a-select v-model="valueA"
  @dropdownVisibleChange="(open) => dropdownVisibleChange(open, 'selectA')">
  <a-select-option v-for="it in largeOptionsObj.selectA" :key="it.value" :value="it.value">
  {{ it.label }}
  </a-select-option>
</a-select>
<a-select v-model="valueB"
  @dropdownVisibleChange="(open) => dropdownVisibleChange(open, 'selectB')">
  <a-select-option v-for="it in largeOptionsObj.selectB" :key="it.value" :value="it.value">
  {{ it.label }}
  </a-select-option>
</a-select>

const valueA = ref([])
const valueB = ref([])
// 全量下拉框数据
const selectOptions = [ ... ]
// 存储下拉框，默认给全量，用于反显
const largeOptionsObj = ref({
  selectA: [...selectOptions],
  selectB: [...selectOptions]
})
// 多个下拉框，timer必须要用各自的timer，不然会有问题。
const timer = ref({})
const clearTimer = (key) => {
  clearInterval(timer.value[key])
  timer.value[key] = null
}
const dropdownVisibleChange = (open, key) => {
  // 先插入10条
  largeOptionsObj.value[key] = selectOptions.slice(0, 10)
  const count = ref(10)
  if (open) {
    timer.value[key] = setInterval(() => {
      let plusItems = []
      if (selectOptions?.length) {
        plusItems = selectOptions.slice(count.value, count.value + 20)
      }
      largeOptionsObj.value[key] = largeOptionsObj.value[key].concat(plusItems)
      count.value += 20
      if (count.value > largeOptionsObj.value[key].length) {
        clearTimer(key)
      }
    }, 50)
  } else {
    if (largeOptionsObj.value[key]) {
      largeOptionsObj.value[key] = largeOptionsObj.value[key]
    }
    clearTimer(key)
  }
}

页面关闭，清除定时器

onUnmounted(() => {
  Object.keys(timer.value).forEach(key => {
    clearTimer(key)
  })
})