javascript - 如何在 vue.js 组件中加速渲染图表

Question

我有一个 Vue 组件，它在用户单击图像时呈现另一个组件。它的行为就像这个小提琴，除了当卡片翻转时用户看到的不是#2，而是一个图表。

代码看起来像这样。

<div class="card" v-on:click="flipCard()" v-bind:class="{ flipped: isFlipped }">
  <div class="front">
    <img src="something.jpg">
  </div>
  <div class="back">
    <BarChartTile :sourceData="chartData" :options="chartOptions"></BarChartTile>
  </div>
</div>

我遇到的问题是，当用户第一次点击卡片时，图表需要很长时间才能呈现。在用户点击卡片之前，Vue.js 不会将图表的源数据推送到 Chart.js，但现在用户需要足够的时间来注意到事情进展缓慢。

一旦图形组件渲染一次，一切都很好。用户可以一遍又一遍地点击卡片，图表将流畅地出现/消失，没有延迟。

有没有办法告诉 Vue.js 完成渲染子组件的工作，但在用户单击卡片之前不显示它？或者，是否有这种翻转卡片行为的替代实现可以避免我遇到的问题？

标签： javascriptvue.jsvuejs2chart.jsvue-chartjs