Object copy Stringify/parse vs Quasar.extend

[pintaf]

Hi there.

Until now I’ve been using JSON.parse(JSON.Stringify(OBJ)) to deep copy.

I recently found out the extend method of Quasar.

One of the advantage I can see right now is the possibility to ask for deep copy or no (resulting in a shallow copy in that case I guess).

I have several questions. For deep copy only, is it better to use the Quasar method, or the Parsing/Stringify is more efficient as Javascript native ?

Second question. In the example the extend method returns the object, but there are several object parameters following.
It is unclear. Maybe a little update of the documentation would help.

[qyloxe]

@pintaf well, I’m not sure, that what I’ll write will be most helpful or right in every situation, but this object copying is a very interesting problem.

In the context of Vue, the duplication of nested object has more caveats:

• retaining reactivity
• following all Vuex requirements (and not breaking Vuex and retaining this reactivity)

My opinion as for now, is that deep cloning objects in js in the context of Vue/Vuex is strongly application specific. What that means? Well, some specific objects in specific context could be copied and for some, it is better to use something stronger, more complicated and in the bigger picture (at the end of the day ) it will be better for a project as a whole.

The solution with JSON - parse - stringify is nice, because it should work (almost) always. In my practice, it is the most straightforward, safe and PREDICTABLE solution.

However, there is this extend function:
https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/extend.js
Look at yourself if it will work in your situation. I have a tendency to not trust javascript completely, so honestly, I’m not sure if this implementation will handle all the cases in foreseable future. Probably yes, but I won’t give a guarantee. The conclusion is that, IF you want to use that, then you WILL need tests. Those tests will give you some predictability.

Vuex - main main problem with deep objects is Vuex. This is where I need this mostly. There are tons of snippets/articles on google (“vuex object copy”). There are even helpers, repositories and libraries for that.

However - there is one technique, which in my opinion, in bigger contexts, with more data, probably retrieved from API is the most beneficial. It is nested data normalization and querying. Please look at this library:

https://vuex-orm.org/guide/prologue/what-is-vuex-orm.html

If you have a deep nested object, this library is capable of normalizing it, putting the data into simple, related lists, and when you need something - you can query those nested data. You can safely remove them, insert, paginate and everything is reactive. This is my preferred solution for more complicated cases. In simple ones - I still like this JSON stringify.

[pintaf]

Hello @qyloxe.

Well, this is quite a long an complete answer.
This has enlighten me a bit, and since I do not use VueX, I’ll stick with Parse/Stringify.

Thanks a lot!

[rstoenescu]

Multiple params because you can extend multiple objects in one go.

[pintaf]

Okay that make sense, but then it is weird that a function that can extend multiple object returns only one object. Isn’t it ?

let newObject = extend([Boolean deepCopy], targetObj, obj, ...)

For example, how would it work for several objects ?

something like that?

extend(true, obj1, extendedObj1, obj2, extendedObj2)

[rstoenescu]

Cause you want a resulting object composed of one or more objects “merged” together.

[pintaf]

Okay that make sense.

I should have gone see jQuery.extend() for more info.