[v4] input lagging - big objects

[gnidustotalus]

What happened?

Vee-Validate is slow when validate huge amount of data with deep properties. You can check it in demo link.

Reproduction steps

1. I have array of users with addresses.
2. Where there is 50+ fields in form validating process is slow and input is lagging when user is typing.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://codesandbox.io/s/vee-validate-test-big-object-pnggt?file=/src/App.vue

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[gnidustotalus]

Any news of this issue?

[logaretm]

I didn't have time to look into it yet. Probably on the weekend.

[gnidustotalus]

Ok, thanks for the info

[gnidustotalus]

I didn't have time to look into it yet. Probably on the weekend.

Any news?

[logaretm]

I checked this and there are a few things to note

Dev Mode

It does indeed lag but it is noticeable in DEV mode, in production it would be reduced significantly. This is due to the DEV tools plugin refreshing its state.

If you are using the esm version (with webpack or vite) then the performance should significantly improve due to the dev tools plugin being dropped. If this is not the case for you, let me know how you are building for production.

---

With the dev mode issues out of the way. There are some small inefficiencies left, notably meta.dirty field on the useField or Field component since it has to be calculated synchronously.

You can generally get better performance if you switch over to the composition API and your own components instead of Field component. As you have more optimization opportunities that the Field component doesn't include.

I will continue to explore other performance opportunities but there isn't anything immediate that could be addressed at this moment.