Grid rendering incredibly slow since updating from Vue 2 to Vue 3

Question

We've updated our app from Vue 2 to Vue 3, and the SyncFusion grid rendering is exponentially slower. Rendering a grid with around 2000 rows and 15 columns with one level of grouping and virtualization off used to take 3 seconds in Vue 2, and now take 2-3 minutes in Vue 3.

The reason we're not using virtualization is that there are rendering glitches. The performance trade off was acceptable when using Vue 2, but now that trade off has completely changed in Vue 3.

Do you have further info on the Vue 3 performance degradation?

Aishwarya Rameshbabu · Answer

Hi
Jacob,Greetings
from Syncfusion support.Upon
reviewing your query, we have identified that you are experiencing performance
issues with Syncfusion Grid while upgrading your project from Vue 2 to Vue 3.
We have created a Grid sample based on the provided information, using 15
columns with 2000 rows and a single grouping. The Grid rendering time is
approximately 2 to 3 seconds, significantly less than the 2-3 minutes as you
mentioned. Please refer to the sample below, where we logged the rendering time
in the console. However, with virtualization enabled, the Grid rendering time
is reduced to less than one second. You also mentioned encountering rendering
glitches with virtualization enabled, which we were unable to reproduce.Sample
without virtualization: https://stackblitz.com/edit/529eag-p2lsiv?file=src%2FApp.vue,package.jsonVirtualization
enabled sample:
https://stackblitz.com/edit/529eag-t5hqys?file=src%2FApp.vue,package.jsonIf you
continue to experience any issues, please provide the following details to
assist us in further validation:1. The
complete Grid rendering code, including any templates and event handler
functions used.2. The type
of data binding utilized in the Grid (Remote or Local data). If Remote data is
used, please share the adaptor details.3. The
current version of the Syncfusion package you are using.4. A simple
sample replicating the issue or try to replicate it with the provided sample
along with a vide demonstration.Additionally,
please refer to the following documentation for best performance practices with
Syncfusion Grid:Documentation
Link: https://ej2.syncfusion.com/vue/documentation/grid/performanceRegardsAishwarya
R

Jacob · Answer

Hi AishwaryaFrom inspecting further, actually there are 100 total columns, but only 15 are visible. The remainder are hidden. But the hidden columns seem to have an exponential effect on performance.

Aishwarya Rameshbabu · Answer

Hi
Jacob,Based
on the provided information, we have updated the sample. There may be minor
difference in the rendering time of the Grid component when using the shared
configuration with Vue 2 and Vue 3. However, the significant difference of 2-3
minutes as you mentioned is not observed. We are currently verifying this
variation in rendering time between Vue 2 and Vue 3. We will update you on our
findings shortly.RegardsAishwarya
R

Mohamed Imran Thamin Ansari · Answer

Hi Jacob,Thank you for your
patience as we address your query. The rendering time
delay you're experiencing in Vue 3 compared to Vue 2 is due to the introduction
of a new reactivity system based on proxies. This new system enables Vue 3 to
handle both simple and nested objects, allowing it to intercept property access
and updates. However, this can sometimes result in slower rendering time when
dealing with large datasets. In Vue 3, a proxy is
created for each component’s object and is bound with two handlers: get
(triggered when a property is accessed) and set (triggered when a property is
modified). When rendering a Grid component with a large dataset, Vue 3 takes
additional time because the proxied object triggers get and set events during
each manipulation. This is likely contributing to the increased rendering time
you're seeing. We have raised this
issue in the Vue forums and will keep you updated on any relevant responses or
improvements. Upon further
validation, we found that converting objects to their raw (unproxied) form can
improve rendering time to match that of Vue 2. However, please note that this
approach removes Vue 3’s reactivity behavior. Could you confirm if improved
performance without reactivity would meet your requirements? Please let us know
how you'd like to proceed, and we will assist you accordingly. Best regards,Mohamed

Jacob · Answer

Hi Mohamed,We had to switch to ag-grid due to this issue. It was a quickly replacement without any issues. The performance is amazing and we were able to finally turn on virtualization without a hitch. All the reactivity works without any issue. Just letting you know, so that you're aware it's possible.

Mohamed Imran Thamin Ansari · Answer

Hi Jacob,We deeply regret the inconvenience caused.We have maintained consistent code behavior between Vue 2 and Vue 3. However, as mentioned earlier, Vue 3's reactivity system is contributing to the increased rendering time delay. We have planned to improve this rendering time in the Vue 3 component without affecting reactivity, and this enhancement is currently in our queue. We will include it in one of our upcoming releases.Feedback: Enhance the rendering performance for the VUE 3 components.
Regards,
Mohamed

Jacob · Answer

Hi Mohamed,Thanks for the reply, and for providing your important software library and support for us all these years.Best Regards.Jacob