初始化Vue.js时延迟

Delay when initializing Vue.js

本文关键字：延迟 时延 js Vue 初始化      更新时间：2023-09-26

我正在将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秒的延迟。在此延迟之后，生命周期挂钩（已创建、beforeCompile等）将同时启动。

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

可能相关：

  • myData对象不小但也不大（当JSON.stringified时为28KB）

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

事实证明，数据对象myData太复杂了（而且它比我在原始帖子中所说的要大得多）。

Vue.js文档说明

不建议观察复杂的对象。

参见Vue.js文档

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

相关文章：