小僧〜！！ vue-infinite-loading が "無限" だなどと決して思うな。

「小僧〜！！」（映画ピンポンより引用）

怒んないで。ネタなのであんまり本気にしないで下さい。

Vue を使ってスクロールに応じてその先をロードしたいという様な要望があった時に、vue-infinite-loading が割と有名なのではないでしょうか。便利なのですが、そのまま使うと問題になる事があります。例えばスクロールするうちに1万個の要素が追加された状態で何らかの状態変化によってそれらの要素が全て書き変わる様な事が起きると重くて使い物にならなくなります。

要はせめて画面に表示されているものだけに描画を絞りたいといった事がある訳ですが、その様な場合、Vuetify の v-virtual-scroll が参考になります。内部的に何をやっているかと言うと、データに対して全てのコンポーネントを作成するのではなく、画面内に入っている要素に対してコンポーネントを割り当てるという形になっています。

これでだいぶ緩和される、というか画面内に10個程度しか要素がない場合にはこれで十分なのですが、縦幅のあまりない要素を20個とか30個とか表示させたい場合はこれでも問題になる（スクロールが遅い）事があります。画面内に入ってきた要素を一気に作成するので、そのコストがかかりすぎるという事です。

ではどうすればいいかと言うとコンポーネント自体は画面分作成しておき、スクロールに応じてコンポーネントに渡す描画プロパティを書き換えるという方法があります。これだとコンポーネントを新規作成するコストがない分、高速になります。もちろん、結局のところ DOM の書き換えは起こるので激的に速くなるかと言うとそうでもないのですが、それでも 1/2 か 1/3 くらいにはなります。

という訳で、v-infinite-loading はあんまり無限じゃない罠の話でした。