Delay when initializing Vue.js

Question

I am embedding Vue.js into an existing application.

When initializing Vue.js like so:

new Vue({
    el: "#myDomElement",
    data: myData,
    computed: {
        price: function() { 
            return _this.productPrice(); 
        },
    },
    created: function() { console.log("Vue created."); },
    beforeCompile: function() { console.log("Vue about to compile."); },
    compiled: function() { console.log("Vue compiled."); },
    ready: function() { console.log("Vue ready."); },
});

I am getting a lag of about 10 seconds at this point in my code. After this delay the lifecycle hooks (created, beforeCompile etc.) all fire at once.

The delay is independent of the view, even if myDomElement is an empty div the delay occurs.

Might be relevant:

The myData object is not small but not huge either (28KB when JSON.stringified)
The Vue.js initialization happens in a module, that is exported via modules.export and then wrapped up by Webpack

@AaronFranco Thanks for having a look at it. I updated the question. — nano-rbu
– nano-rbu, Commented Apr 15, 2016 at 13:38
How do you know Vue is the bottleneck? With 2k lines of code, there could potentially be many possibilities for the bottleneck. — Aaron Franco
– Aaron Franco, Commented Apr 15, 2016 at 13:40
@AaronFranco The delay occurs if the new Vue({...}); statement is there, the delay does not occur when this statement is removed, which indicates that Vue is at least involved in the delay. — nano-rbu
– nano-rbu, Commented Apr 15, 2016 at 13:46
Maybe you can work with this to reproduce the issue: jsfiddle.net/aaronfranco/yMv7y/1456 — Aaron Franco
– Aaron Franco, Commented Apr 15, 2016 at 13:52

nano-rbu · Accepted Answer · 2016-04-25 12:31:36Z

4

It turned out the data object myData was too complex (and it was significantly larger than stated by me in the original post).

The Vue.js documentation states

It is not recommended to observe complex objects.

see Vue.js docs

We were able to move some data of the myData object to another object with no data binding and get the application running smoothly again.

answered Apr 25, 2016 at 12:31

nano-rbu

617 bronze badges

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

1 Comment

maiorano84 Over a year ago

This may have indirectly resolved an issue I was having in my own application. Upvoted for the documentation quote.

Collectives™ on Stack Overflow

Delay when initializing Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related