VueJS Disable reactivity for specific properties

Question

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?

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
– Eindbaas, Commented Feb 27, 2019 at 13:42
See here for some ideas. I really like the mixin answer at the end. — ourmandave
– ourmandave, Commented Feb 27, 2019 at 14:33

xpuu · Accepted Answer · 2019-02-27 14:13:07Z

23

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',
    }
},
...

answered Feb 27, 2019 at 14:13

xpuu

1,66415 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tmarois Over a year ago

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.

holden321 Over a year ago

Is it possible to watch these non-reactive variables ?

Coffiend · Accepted Answer · 2020-06-04 10:34:41Z

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.

Gabriel Machado · Accepted Answer · 2021-11-17 17:56:16Z

1

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

answered Nov 17, 2021 at 17:56

Gabriel Machado

5135 silver badges17 bronze badges

1 Comment

haayman Over a year ago

I'm afraid that would work in only a few cases. My object should definitely not be frozen

Collectives™ on Stack Overflow

VueJS Disable reactivity for specific properties

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related