javascript - 初始化 Vue.js 时出现延迟

Question

我正在将 Vue.js 嵌入到现有应用程序中。

像这样初始化 Vue.js 时:

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."); },
});

此时我的代码出现了大约 10 秒的延迟。在此延迟之后，生命周期 Hook (created、beforeCompile 等)都会立即触发。

延迟与 View 无关，即使 myDomElement 是空 div 也会发生延迟。

可能相关:

• myData 对象不小，但也不大(JSON.stringified 时为 28KB)

• Vue.js 初始化发生在模块中，该模块通过 modules.export 导出，然后由 Webpack 包装

Answer 1

事实证明，数据对象 myData 过于复杂(并且它比我在原始帖子中所述的要大得多)。

Vue.js 文档指出

It is not recommended to observe complex objects.

see Vue.js docs

我们能够将 myData 对象的一些数据移动到另一个没有数据绑定(bind)的对象，并使应用程序再次顺利运行。