Javascript 如何在vue.js组件中加速图表的渲染

我有一个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执行渲染子组件的工作，但在用户单击卡之前不显示它？或者，是否有此卡片翻转行为的替代实现，以避免我遇到的问题？

不知道为什么有人对此投了反对票？鉴于此模板，在翻转条形图之前，没有任何东西会阻止其呈现。您是否在用户单击时获取数据，或者其他可能影响图表数据实际可用的因素？你可以看到它的一个测试已经在翻转之前呈现。谢谢你发布这个。这个问题原来是由CSS引起的。Vuejs的表现一如既往。是我愚蠢的CSS出了问题。