[Bug Report] high performance impact when using a lot of v-text-field

[stygmate]

Versions and Environment

Vuetify: 1.4.2
Vue: 2.5.22
Browsers: Google Chrome
OS: Mac OS 10.13.6

Steps to reproduce

just input one char in one of the field while doing performance recording in chrome devtools.
Mesurement 1: with the exact codepen
Mesurement 2: removing all text-field except one
Mesurement 3 only one text-field but with @input="(value)=>this.field1=value" (for having just one half of the v-model behaviour)
Mesurement 4: with the 20 text-field replaced by standard input

Expected Behavior

Only have one text-field updated on each keypress.

Actual Behavior

Mesurement 1: 21,54ms
Mesurement 2: 2,98ms
Mesurement 3: 0,98ms
Mesurement 4: 1,94ms

Reproduction Link

https://codepen.io/stygmate/pen/zyVagj

Other comments

I test here with only 20 text-field but in my app i have 20 text-field by people concerned by the form and the mesurement are done on a macbook pro 2018. On my phone huawei p9lite typing on keyboard in a field can lag a lot.

[stygmate]

mesurement 1

mesurement 2

mesurement 3

mesurement 4

[DRoet]

I have noticed this in the past as well with many v-select elements, even when they all had the same items value. I worked around it for now but I figured I'd leave this comment here in case someone want to take a look at optimizations.

[stygmate]

Any news on this? It really blocks my app development as I don’t know if I can rely on classic usage of v-model.

[StefanFeederle]

I also encountered performance problems when using many v-selects.

[stygmate]

maybe related to vue: vuejs/vue#6898
will not be fixed until vue 3... any workaround ?

[stygmate]

We have to found a workaround. it make Vuetify useless in case of consequent forms usage by lambda people. we are developer and many of us have decent computer but it's not always the case for most users.

[DRoet]

Yeah seems like an upstream vue issue, tracked in vuejs/vue#6351. I guess we will have to wait untill 3.0 : /

[stygmate]

@MajesticPotatoe Hi ! why removing "critical" tag ? It's a Vuetify usage breaker for big form ! In my case the front as to be used by any surfer with any computer / phone configuration and the laggy input due to this bug are so bad that it will let the users with the filling of no confidence in the service.
if no one resolve this i have two choices: resolve the problem myself (unknown time of work) / pay some of you to work on a workaround for it to work with the actual vue version ... :(

[MatthewAry]

It might be a good idea to at least keep it pinned. That way us developers can become aware of the issue if they encounter it and help encourage a resolution.

[MajesticPotatoe]

@stygmate mis-click, fat fingers.

[MatthewAry]

vuejs/vue#5155 I think this bug has already been discovered a while ago. I don't think we will be seeing a fix in Vue 2 as they are declaring it as expected behavior.

[stygmate]

@MatthewAry so i think the correct way to react is to code a WorkAround 💡
Discovering that i can't release to production a full App because of that is weird.
we can't wait 6/12/18/... months for vue 3 to maybe correct that.

[johnleider]

Inputs are being updated as part of v2.0 and I will be looking to see if there are things we can do to alleviate this burden. Thank you for your patience.

[mandaputtra]

The issue still there, the workaround that works for me was split big form components into smaller ones, and use vuex to store form value. It will decrease lot of performance issue.

[adrchw]

@Mikilll94 yes it works, click my link you can find tests there.

You can still have one big form send at once but keep inputs as a separate sub-components then during typing it will be re-render only focused input.

[Mikilll94]

@Mikilll94 yes it works, click my link you can find tests there.

I saw your examples on Stack Overflow. Now I understand better this problem in Vue.js.

You can still have one big form send at once but keep inputs as a separate sub-components then during typing it will be re-render only focused input.

I don't understand that. What I should do? Put inputs in groups and make a separate component for each group? This is not very convenient during development.

[Mikilll94]

Wow! Congrats! It's awesome that this problem was solved.

Do you plan to include these changes also in Vuetify 1.x? Because for medium and large projects migrating from 1.x to 2.x is very difficult.

[johnleider]

It's a pretty simple task, just monotonous. I'm very swamped atm with the upcoming release so unless @KaelWD wants to do it, it would have to wait until next month unless someone wants to PR it.

[dmoebius]

Do you think it's a good idea to close this issue while the PR has 30 tests disabled?

[userquin]

@johnleider, @KaelWD , can anyone confirm (or NOT) if the FIX will be applied to 1.5 branch?

[MajesticPotatoe]

@userquin

It's a pretty simple task, just monotonous. I'm very swamped atm with the upcoming release so unless @KaelWD wants to do it, it would have to wait until next month unless someone wants to PR it.

[KaelWD]

can anyone confirm (or NOT)

No we cannot confirm. It may or may not be done at some point eventually.

[siegy22]

Is this patch already included in 2.1.x?

[DRoet]

Is this patch already included in 2.1.x?

yeah pretty sure this landed in 2.1.0

[menthos984]

I am currently using 2.1.0 but v-text-field has still performance issues. Input lag starts when I reached 40 and so on (my v-text-field is dynamically appended)

[vallemar]

I am in the same situation, but my case is with v-select. I think I'm going to make a light homemade component .....

Real solution for this!

[ggedde]

Same issue, I did change to bind value and use @change as mentioned above for many fields, but for others I needed realtime responses and validation so instead of @change="v => (foo.bar = v)" I am using v-debounce="v => (foo.bar = v)" from https://github.com/dhershman1/vue-debounce. I really just wish this was still in vue as a default option.

[stygmate]

@KaelWD why this issue is closed as it don't seems to be resolved ? I understand that it is an upstream issue, but maybe you can provide an integrated workaround.

[DRoet]

the issue is closed because it did improve a lot in the 2.1.0 release, but maybe it is still not enough for some people. Vue 3.0 might allow for further performance improvements.

[quroom]

https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
With this feature, just make your own component.

<script>
import VTextArea from 'vuetify/lib/components/VTextarea/VTextarea.js'
export default {
  name: 'LazyTextArea',
  extends: VTextArea,
  model: {
    event: 'change'
  },
}
</script>

I made new component that doesn't update model when input event is fired.
It looks well.

[WieFel]

Still experiencing the same problem on Vue 2.7.14.

Working solution I came up with is to wrap (at least) the part containing the v-text-field with v-lazy (more info here).
Like this, the v-textfields are lazily loaded and for me the page works way smoother.