vue组件检测完成渲染

Question

在我网站的其中一个页面上，有许多API调用，这些API调用可为AmCharts图表组件提供数据。返回API调用时，我在此页面上将isLoading标志设置为true，并显示加载微调框。当API调用完成时，我将isLoading的值更改为false，从而呈现了图表。

但是，当isLoading更改为false时，页面上会有很大的延迟，在图表出现之前，白屏显示了几秒钟甚至更多秒。

这是代码段。

data() {
  return {
    isLoading: true
  }
},

mounted() {
  await API_calling();

  this.$nextTick(() => {
    this.isLoading = false;
  }
}

我相信此延迟是由于AmCharts渲染时间所致，当所有图表完成渲染时，我想将isLoading值设置为false。

所以我对stackoverflow的问题是，如何检测Vue组件完成渲染的时间？

Answer 1

如果同时谈论几个组件加载，那么最好的方法是使用vuex。

您可以存储到vuex 2值：isLoading和countLoadingComponents。

您可以在每个组件的countLoadingComponents方法的开始处递增created()，并在该组件内的API调用完成时递减countLoadingComponents。

在主组件中，为watcher状态创建countLoadingComponents。如果countLoadingComponents等于0，则将isLoading的状态更改为false。