search

wearebraid / vue-formulate

⚡️ The easiest way to build forms with Vue.
https://vueformulate.com
MIT License
2.25k stars 245 forks source link

Slow performance with large sets of data #223

Open mrkwdwrd opened 4 years ago

mrkwdwrd commented 4 years ago

Describe the bug Performance is slow when using checkbox input bound to a model with a large number of records.

To Reproduce See CodePen below. I have set up a simple form with Vue Formulate inputs populated by an array of 500 records (and have also included native inputs for comparison). The inputs are bound to an array that stores the selected values.

The performance of the checkboxes individually is quite slow (there is a noticeable lag compared to the native inputs) and seems worse when using check/uncheck all. Vue developer tool shows around 1,500 events being emitted from FormulateInput and FormulateForm whenever the values are updated.

https://codepen.io/mrkwdwrd/pen/LYNGaEz

justin-schroeder commented 4 years ago

Not ideal at all. This is technically the same as #171 (checkboxes are technically groups internally) but has a different manifestation to end users so lets leave it open on here for now.

justin-schroeder commented 3 years ago

To help address this issue, 2.5.1 shipped a debouce prop that prevents these kinds of large data sets from being so problematic. To be clear it isn't perfect, but it's a big improvement. Here's the same form as above with a 50ms debounce

https://codepen.io/justin-schroeder/pen/wvojNwV

anisite commented 3 years ago

With a large form (e.g. >150 fields) we got very high lag while typing on text fields, we fixed it changing v-model into v-model.lazy in input text component. All is working great now (we also removed debounce after that, it's incompatible)