Non-primitive documents' fields => unnecessary components updates

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?

i also noticed that minimongo always returns a new object. This is much better in apollo-client by the way, where you always get the same objects from the cache…

maybe in your case, i would go with " 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." or maybe “Use only primitive fields or pass non-primitive fields as several primitive props.”

Thanks. Do I understand correctly that Apollo replaces both mini mongo and Vuex (or alternatives), as well as eliminates the need for vue-meteor-tracker? I still avoid it as overkill for our medium-sized apps with simple queries.

Blaze handles this case smartly by observing cursors and using addedAt(), changedAt(), etc. callbacks to update the corresponding components only. This is something I like very much.