Performance issue when using lot of options

[LeMinaw]

The performance of vue-next-select is relatively poor when reaching thousand of options.

To reproduce

This can be experienced on this tweak of the playground demo with 6000 options:

https://codesandbox.io/s/vue-next-select-performance-n93oq

Just open/close the select and hover on dropdown items, latency should be quite obvious.

Expected behavior

Better performance - possibly by allowing the user to disable some event listeners? From the profiler view, a lot of time is spent dealing with mousemove events when hovering options.

Screenshots

Profiler view. Red time span is during select dropdown open, yellow ones are during options hover. See how rendering speed collapses from 60 to 1/2 FPS.

Desktop

• OS: Win 10
• Browser : Firefox
• Version: 89

[mttzzz]

confirm this on chrome. we need a lite version :)

[soc221b]

Thanks for your feedback ❤️

I made some changes to improve performance and will release it in the next version.

---

Also, I think if it is very large, no one wants/needs to browse all these options.

On the contrary, it may be better to use the search/filter feature in this case, so that we can also limit the size of the options by the visible-options:

const option = ref(['foo', 'bar'])

const filterText = ref('foo')

const visibleOptions = computed(() => {
  return options.value
    .filter(option => option.startsWith(filterText.value))
    .slice(0, 999)) // <- limit to 999
})