MatthewAry
commented
3 days ago VAutocomplete is an extension of VSelect. VSelect already uses a virtual scroller.. When you perform the select all operation, you replace the entire array which, from a vue perspective, is best thing you can do. It shows that there is room for improvement.
Some things that stood out after a cursory analysis on my part:
- https://github.com/vuetifyjs/vuetify/blob/797cd88691e813b9e1c4c41323c5e8aaa7f9b356/packages/vuetify/src/components/VSelect/VSelect.tsx#L354
- https://github.com/vuetifyjs/vuetify/blob/797cd88691e813b9e1c4c41323c5e8aaa7f9b356/packages/vuetify/src/components/VSelect/VSelect.tsx#L316-L318
- https://github.com/vuetifyjs/vuetify/blob/797cd88691e813b9e1c4c41323c5e8aaa7f9b356/packages/vuetify/src/components/VSelect/VSelect.tsx#L171
Its possible that by mapping over the entire model array, and doing join operations, and accessing nested properties within each value can cause problems. These are O(n) type operations and can slow things down.
I think there is legit room to improve.
Environment
Vuetify Version: 3.7.4 Vue Version: 3.5.13 Browsers: Chrome 130.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
Create a simple v-autocomplete with large number of items (here 5K)
Expected Behavior
On "Select all" click, all items should be active immediately.
Actual Behavior
App freezing for several seconds before doing so.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
It works well with a virtual-scroller and v-list-items inside. Is there any reason it's laggy with autocomplete ? Is it due to component intern logic ? If so, is there any workaround for large sets of items like this one ?
Thank you in advance !