Hello. I would like to ask for practical advice. I’m going to describe a quite common situation (I guess) and I wonder how developers handle it.
Let’s assume we pass an object as a prop to a child component that uses object’s fields in a reactive way. Now, if we don’t mutate the original object but replace it with the exact copy, Vue interprets it as a new prop value and executes the render function, recalculates computed properties, calls updated hook, etc., although there is no real need for that. Example.
I use vue-meteor-tracker and this is exactly what happens when a parent component fetches documents with non-primitive fields from a Mongo collection and passes these fields as props to child components: single Mongo document update causes updates of all Vue child components.
I’ve got 4 solutions for this:
-
Use only primitive fields or pass non-primitive fields as several primitive props.
-
Stringify each document, pass the string as a prop, parse it inside a child component (example).
-
A variation of the second way that doesn’t involve JSON and instead uses
Object.assign()to transfer the new object’s properties. I got it from Vue Forum but, unfortunately, the provided CodeSandbox is dead now. -
In the parent component, fetch only a list of
_id's, pass them as props, use them in child components to fetch a single document and observe its changes.
However, I don’t like any of them. Has anybody else faced this problem and figured out a better solution?