我正在将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
对象的一些数据移动到另一个没有数据绑定的对象,并使应用程序再次平稳运行。