CODEWITHSUNDEEP
performancevue.jsvuejs2vue-reactivity
S. E.
S. E.

Reputation: 415

Make vue ignore objects during reactivity walk?

Is there a way to make vue ignore/exclude an object from it's "reactivity walk"?

We have a vue app controlling an editor for google maps Polylines and I have noticed that when it is first mounted the page takes a huge performance hit (i.e freezing for 6 seconds every mount). I can see in the firefox performance tab that most of this time is spent by we.prototype.walk in vue.min.js and I assume this is vue making the google maps object reactive and halting the page due to its size.

I therefore want to mark the map object as "ignored" by vue as the component/app does not need access to it, is there a way to do this?

Our structure is something akin to this:

Component.vue

<template>...</template>
<script>
    ...vue_stuff,
    props: ["tool"] // <--- This ìs the "editor" object

Editor.js

class Editor{
    constructor(map, line){
        this.map = map; // <--- This is the google maps object 
        this.line = line; // <--- This is the Polyline object, the editor must have access to this
                          // The line also contains a reference to the map, 
                          // so it is no use to remove it from the object
        this.undoStack = []; // <--- The vue component must have access to this + functions
        // ...
    }
}

Upvotes: 1

Views: 589

Answers (2)

S. E.
S. E.

Reputation: 415

I managed to solve my problem by adding a dummy observer to the map object, inspired by / stolen from https://github.com/rpkilby/vue-nonreactive. This makes vue "believe" it already have scanned the object and therefore ignores it.

After the map object is initialized I create the dummy observer with

map.__ob__ = new (new Vue()).$data.__ob__.constructor({})

Upvotes: 1

l1b3rty
l1b3rty

Reputation: 3642

This should remove the reactivity from the map property:

this["map"] = map;

Upvotes: 0

Related Questions