Cloning template data passed to parent

silly me! i thought that assigning data to a variable meant that the data was separate! :expressionless:

app.data = payload  //  'payload' is the variable passed from template
app.workingData = payload  //  because i want to mangle the hell out of this one
//  after mangulation is achieved, reset to original with stored copy:
app.workingData = app.data  //  ...but no.  they are BOTH mangulated.  WTELF.

yeaah… in this sort of thing, JS is just dumb IMLTHO.

anyway, after some reading, head-scratching, reading some more, i found Lodash’s .cloneDeep() as well as vanilla Object.assign(). given that i always seem to smash my shins on weird JS stuff, which of these is best for VueJS that won’t give me grief later? i don’t want to implement one and find out that i have to use the other because my data somehow didn’t ‘copy correctly’…

Lodash’s method does a recursive clone, meaning it walks down all of the objects in order to give you a true clone without any references maintained.

Object.assign will only do a shallow clone, meaning any nested objects will still maintain their reference.

So, Lodash is probably what you want, though it won’t perform as well because of the recursive looping.

_.deepClone() it is then! i can’t (yet) fathom why JS does this ridiculous thing… anyway, for a few thousand records and a couple hundred users, the performance hit is negligible.

It has to do with memory allocation. Placing an object in memory and referencing that same object greatly reduces the need to allocate memory for each and every object.

This is a good read explaining primitive value types vs reference types and how each affect memory allocation: https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0