Vuex: Modifiers to improve performance of larger datasets

[thupi]

I just started working with VueX and have been using Mobx for a long time.

I quickly realized that the concept of modifiers was missing in Vuex. Furthermore i was wondering how to improve performance of large arrays of objects without having modifiers. In Vuex all the objects in an array must be converted to reactive object which might not be required and might be way less performant.

Wouldn't modfiers give the ability to further improve performance of Vuex?

See MobX modifiers: https://mobx.js.org/refguide/modifiers.html

[ktsn]

I'm not familiar with MobX but do you mean you would like to avoid to convert immutable object for performance?
If so, you can already do that by using Object.seal for such object. Vue does not convert Object.isExtensible(obj) === false object.

[thupi]

@ktsn MobX is similar to Vuex and is a reactive store often used with React.

If i do understand you correct i have to loop through my large array of objects and Object.seal(obj) on every object ? :)

If that is the case this might be useful information in Vuex documentation? The process of converting a immutable object to a reactive object might have an impact on performance when working with larger datasets?

[LinusBorg]

If i do understand you correct i have to loop through my large array of objects and

You would probably do that when you get the data, but yeah.

Note that if the array itself is also immutable, you can simply calll it on the array, then you don't have to call it on the individual objects inside it as well.

If that is the case this might be useful information in Vuex documentation?

Good idea.

The process of converting a immutable object to a reactive object might have an impact on performance when working with larger datasets?

It definitely does have a significant impact with large datasets.

[thupi]

@LinusBorg That solves my problem in most cases. However, in few instances i would like Vuex to react to chages of an Array like when push, slice, or replaceing a object. In order to achieve that behavior i would have to loop the Array right :) ?

[LinusBorg]

Yep, that's right.

[thupi]

@LinusBorg i am not able to find any documentation on the seal function on arrays.

Even though the loop with Object.seal(obj) do solve my issue i do think it would be a very nice addition for Vuex to have some implemented functions for this purpose?

[LinusBorg]

i am not able to find any documentation on the seal function on arrays.

Object.freeze() works on arrays and serves the same purpose.

[...] i do think it would be a very nice addition for Vuex to have some implemented functions for this purpose?

Not sure about that. Applying .seal or .freeze is literally a one-liner, so the benefits would be small, while increasing then API surface of the lib.

[thupi]

@LinusBorg Well, it might just be me that is scared of the many articles about the performance issues related to that method :)

For now i'll just use that function and keep an close eye on performance related to that. Thanks you for the help :)

[LinusBorg]

the many articles about the performance issues related to that method

Care to elaborate?

[thupi]

@LinusBorg It might just be me not having experience with these freeze and seal but i made a quick search in order to learn a bit about Object.seal() & Object.freeze(). Here i found pages with similar information as this: http://stackoverflow.com/questions/21402108/difference-between-freeze-and-seal-in-javascript

I am most worried about cross-browser performance. But as i said, i dot have very little experience to these kind of functions and do not know a whole lot of their impact on performance and browser compability :)

[ktsn]

I'm not sure about the performance of Object.seal() and Object.freeze() but if you find it is really needed to introduce MobX like modifier to avoid to using them for performance, you should also open an issue in vuejs/vue 🙂. Because Vuex actually does not have the observable feature - it completely relies on Vue's.

[thupi]

@ktsn That sound right, Vuex might after all use the same reactivity implementation as Vue.

I'll close this issue for now :)

[LinusBorg]

That Information is three years old and relies on tests on jsperf, which can be hugely misleading because it's really hard to write micro benchmarks that realistically measure performance, as more often than not, the simplified benchmark code triggers VM optimizations that would not happen in real usage scenarios.

[thupi]

Okay, Object.freeze() might be the best way to fix that performance issue. Thanks :)