[Vue.js]無限スクロールプラグイン比較

今回はVue.jsの無限スクローラープラグインに比較をしてみたいと思います。

比較内容

・対応しているVue.jsのバージョン
・新要素が表示された際のDOMの状態
・Refsの使用可否

比較対象プラグイン

・vue-infinite-loading
・vue-virtual-scroll-list
・v3-infinite-loading

結果

以下の用になりました。詳細は別の章で説明します。

対応しているVue.jsのバージョンの詳細

実際に各バージョンでプラグインを使用してみました。
各プラグインとも対応してないバージョンではプラグインの内部でのコンパイルが通らなかったので確認作業は容易でした。

新要素が表示された際のDOMの状態の詳細

ブラウザのデバッグ画面でグリッドの要素数を見てみました。

・vue-infinite-loading、v3-infinite-loading

スクロール後の要素数が増えている事が確認できます。
スクロールを一番したまでやったらその分の要素があったので、表示アイテムが増えたらそれだけ負荷が増すということになります。

・vue-virtual-scroll-list

スクロール後の要素がスクロール前と変わって無い事が確認できます。
この方式だと要素数が増えても負荷が変わらないという事になります。

Refsの使用可否の詳細

カラムを形成するdivにref属性を使用し、最初の行のIDカラムの色を変える処理を試してみました。

<div style="display: flex;border-bottom:solid 1px;" v-for="item in state.items" :key="item.id">
  <div ref="id" style="width:100px;border-right:solid 1px;">{{ item.id }}</div>
  <div ref="text" style="width:100px;">{{ item.text }}</div>
</div>

・vue-infinite-loading

通常の方法でアクセスする事が出来ました。
スクロールしても要素が追加されていく方式なのでアクセス可能です。

・vue-virtual-scroll-list

Vue3なので記述方法は変わりますが、Vue3における通常の方法でアクセスする事が出来ました。
スクロールしても要素が追加されていく方式なのでアクセス可能です。

・v3-infinite-loading

通常の方法ではアクセスできず、リストのrefsの要素を伝って行ってようやくアクセスがする事が出来ました。

//vlistがリストへのrefsです
this.$refs.vlist.$children[0].$children[0].$refs.id.style.background="red"

しかし問題点があります、このスクローラは表示部分のみ要素にもっている為、スクロールした際、表示されている最初の行の色が変わってしまいます。
その辺りが他の2つのプラグインと違うので、実装の際には注意が必要です。

最後に

以上、3つの無限スクロールプラグインの比較をしてみました。
それぞれ使用する用途においてはメリット、デメリットがあると思います。使用するケースに適したプラグインを選択するのが重要だと思いました。