初始化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

Answer 1

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.