15

I'm using this geographic library with objects like Map and Layer and LayerTree. I'm using Vue to visualize the LayerTree.

Today I noticed however that some layers contain a lot (over 10,000) items that all become reactive, which completely explodes the memory usage. I have no need for this, because I'm only interested in a few attributes of the layer to display the layerTree.

Is it possible to declare certain attributes to be non-reactive?

haayman
  • 165
  • 1
  • 5
  • Do you have an example of what the tree looks like and how you use it? You should't be storing extreme complex (nested) items the data-field (or vuex), i am not aware of the possibility of making only certain fields reactive. Can't you extract the data you are actually interested in? – Eindbaas Feb 27 '19 at 13:42
  • [See here for some ideas](https://stackoverflow.com/q/45814507/3585500). I really like the mixin answer at the end. – ourmandave Feb 27 '19 at 14:33

3 Answers3

21

Anything defined outside of what's returned by data method is non-reactive. There's nothing official in a guide about this, but so far it just works.

...,
data() {
    // Nonreactive
    this.fuu = 'nonreactive'
    // Reactive
    return {
       bar: 'reactive',
    }
},
...
xpuu
  • 1,514
  • 13
  • 13
  • 5
    Ok. this was amazing. After trying to figure this out for days, even refactored everything into vuex states (which did not reduce performance), storing over 20,000 data points of a chart showed a huge lag storing in data return or states, using this simple trick solved my issue and the data is still accessible anywhere in the component. – tmarois Jun 17 '20 at 15:21
1

I encountered the same issue. I noticed considerable performance degradation when using VueJs with another library with bulky objects -> BabylonJs (3D rendering engine). Injecting reactive getters and setters on large and fluid objects, e.g. Babylon 3D objects, create significant bloat and causes performance hit on FPS.

In practice, you may not need large objects to be reactive. Vue should just be used for rendering content on the DOM.

For the above reasons, I created a fork out of vue called vue-for-babylonians. Check it out here.

With it, you can tell Vue to not make any objects which are stored in vue or vuex from being reactive. You can also tell Vue to make certain subset of object properties reactive. You’ll find performance improves substantially and you enjoy the convenience of storing and passing large objects as you would normally in vue.

Coffiend
  • 31
  • 1
  • 6
1

You can also freeze the object with Object.freeze, and it wont become reactive

Gabriel Machado
  • 401
  • 3
  • 14