Vue.js non reactive objects of array

Question

I have one problem. I have

data: {
        tracks: []
    }

And tracks array will contain a complex object. And when I assign a new value to tracks nested object to become reactivity. But I just don't need not deep reactivity object. How can I do it without created function or JSON.parse?

Because tracks used with Cesium framework and use Vue getter. And FPS becomes 10-15. Without Vue have 50-60 FPS

Arsen Karapetjan · Accepted Answer · 2018-02-05 11:12:50Z

3

Use Object.freeze or Object.defineProperty (you only need configurable: false) to prevent Vue from picking up reactivity on large datasets

https://forum.vuejs.org/t/cesium-and-vue-js-data-getters/26928

answered Feb 5, 2018 at 11:12

Arsen Karapetjan

1133 silver badges16 bronze badges

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

Comments

Philip Feldmann · Accepted Answer · 2018-02-02 13:32:27Z

0

You can implement a deep watcher on tracks:

watch: {
  tracks: {
    handler (newVal, oldVal) {
      // implement what you want to do here
      // If you just wanted to force a re-render you can do:
      this.$forceUpdate()
    }
    deep: true,
}

answered Feb 2, 2018 at 13:32

Philip Feldmann

8,5037 gold badges47 silver badges66 bronze badges

4 Comments

Arsen Karapetjan Over a year ago

but if I don't want deep watching? it is on default deep watching my objects

Philip Feldmann Over a year ago

Vue can either observe the entire path of your object by using deep or just the top layer (by default). There is no in between. You can only either trigger $forceUpdate yourself every time or use this.$set() every time you change a nested object in tracks. But what's the reason you don't want to use deep anyway? It's exactly meant for those situations.

Arsen Karapetjan Over a year ago

Because tracks used with Cesium framework and use Vue getter. And FPS becomes 10-15. Without Vue have 50-60 FPS

Arsen Karapetjan Over a year ago

When I use watch method, I get already array with reactive objects.

Collectives™ on Stack Overflow

Vue.js non reactive objects of array

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related