search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.9k stars 6.97k forks source link

VAutocomplete performance on large lists #19941

Closed b-bika closed 2 weeks ago

b-bika commented 5 months ago

Environment

Vuetify Version: 3.4.1 Last working version: 3.4.0 Vue Version: 3.4.27 Browsers: Google Chrome, Mozilla Firefox OS: Windows

Steps to reproduce

  1. Open playground link
  2. Select 3.4.0 Vuetify version
  3. Try to open the autocomplete menu & search in the text field. Notice how it works instantly.
  4. Switch Vuetify to 3.4.1+ version
  5. Try to open the menu again & type into the text field. It becomes super laggy

Expected behavior

Should work smooth in newer versions

Actual behavior

Lagginess

Reproduction Link

vuetify playground

Other comments

My array is pretty big - 100k items and I don't expect the items to change. I came across this discussion and it makes me wonder if this is the cause of the autocomplete becoming slower in 3.4.1. If so, is there a way to disable the deep watching of the items? I tried wrapping the items I pass non-reactive via shallowRef & markRaw but none had any effect

KaelWD commented 2 months ago

With vue 3.5 we can specify deep: 1 to only update when an item is replaced, this should shave off 1.4 million iterations in your example.

TicTak21 commented 1 month ago

@KaelWD Hello. Can you provide a code sample with a workaround for this? I also have a large dataset.