重たいコンポーネントとv-showの勘所

最近あった出来事が印象的だったのでまとめます。
例えば以下のようなコンポーネントが定義されていたとします。SuperOmoiComponent はマウントするのに2秒かかります。membersの件数は、1000個の要素が存在しています。さて、SuperOmoiComponentがマウントして画面が自由になるのはどれぐらいかかるでしょうか。

<template>
  <div>
    <template v-for="(member, index)in members">
      <SuperOmoiComponent v-show="index < 10" :member="member"/>
    </template>
  </div>
</template>

...

ここで気づいてほしいのが、v-show のディレクティブです。v-show は、display: none を対象の要素やコンポーネントに設定するのですが、v-show を指定している場合はとりあえずレンダリングをする、という動きがなされます。SuperOmoiComponent　はマウントに2秒かかるので、単純計算では 2 * 1000 秒かかることになります。一方で v-if を指定していた場合は、最大でも10件までのレンダリングしか行いませんので、 2 * 10　秒しかかかりません。

ということで、v-if / v-show も使い所を考えて、重いコンポーネントを大量に表示させるような場合には、v-show は使わないなどの工夫が必要なのだと改めて思った次第でした。