CODEWITHSUNDEEP
vue.jsvuejs2
tomwang1013
tomwang1013

Reputation: 1425

Vue.js: does too many reactive data make app slower and cause poor performance?

Our company is developing a very complex single page app(something like excel) with vue.js. There are 10000+ components(each cell is a component) and each component would have about 100 reactive props(data items). We also use vuex. It works but we are worried about its performance(Indeed it performs a little slowly). We heard that too many reactive data will bring poor performance.

I often hear people said that if it is rewritten by jQuery it will be faster.

My question is: can vue handle so many reactive data? If not, what is the limit? Or if my app performs poorly, is it really caused by vue itself?

Upvotes: 1

Views: 3477

Answers (2)

Daniel
Daniel

Reputation: 35704

if it is rewritten by jQuery it will be faster

Even if that was true, it would make your app harder to maintain. But this statement is a False Dichotomy, as if the choice between the frameworks/libraries were the deciding factor in determining the application's performance. It's not. However if you want to get the best performance, benchmarks have shown time and time again, that a tuned vanilla js application outperforms any framework.

The key to having anything perform well is to design (and implement) properly. While Vue has many performance improvements built in, there are additional things you can do to improve performance, such as use of functional (stateless) components.

You could also consider react, it doesn't come with the out-of-the-box performance tuning that Vue has, but it makes controlling these things easier. The end result (going back to my original point) will still largely depend on your implementation.

Upvotes: 1

Paul Rdt
Paul Rdt

Reputation: 89

The following link proves Vue/Vuex is not the problem, perhaps your design is flawed?

This simple test measures the creation of elements in an array and the output to the DOM through a sync and an async loop, on a VUEjs reactive attribute. From the UX point of view, the async method offers a better experience as it allows for notifications.

Credits to Pablo Garaguso

Upvotes: 0

Related Questions