Vuetify: [Bug Report] Data Table render performance

[rogeralsing]

Environment

Vuetify Version: 2.1.14
Vue Version: 2.6.9
Browsers: Chrome 78.0.3904.108
OS: Mac OS 10.15.1

Steps to reproduce

Click the green button on the Code pen example.
This renders 100 items in the Vuetify Data Table.

Expected Behavior

100 items with buttons and icons is an artificial use case, but the long render time hints that something is not as expected.

I would expect 100 items to render within milliseconds.

Actual Behavior

Render time is within 0.5 - 1 seconds

Reproduction Link

https://codepen.io/rogeralsing/pen/MWYyVXz

[rogeralsing]

Issue seems to be more related to Vuetify base components than the Data Grid itself.

Another codepen here https://codepen.io/rogeralsing/pen/GRgZzZz

This renders the same 100 rows with buttons, but in a simple div.
The performance issue is still there.

Same with other components such as the Vuetify text field.

Replacing the content with standard html buttons makes the render speed as fast as one would expect.

[KaelWD]

It just has way too many props, as well as checking if it's inside a v-btn-toggle. If fab, speed-dial, and toggle button were all split up it would be a lot faster.

[saeedtabrizi]

Is there any update or workaround ? i have same issue unfortunately .

[saeedtabrizi]

Hi @johnleider , i guess this bug related to https://github.com/vuejs/vue/pull/9371 issue .