大規模なデータを効率的にレンダリング「vue-virtual-collection」

vue-virtual-collectionとは

vue-virtual-collectionは、大規模なコレクションデータを効率的にレンダリングするためのVueコンポーネントライブラリです。
高さの違う要素を一行に並べて表示することができます。

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm i vue-virtual-collection

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-virtual-collection@1.3.0/dist/index.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/starkwang/vue-virtual-collection

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 [注意]モジュール版は未検証です。

import VirtualCollection from 'vue-virtual-collection'

（2）WEBページの場合

const VirtualCollection = window["vue-virtual-collection"].default;

2.メソッドを設定

Vue.useに上記で取得した VirtualCollection を読み込ませます。

Vue.use(VirtualCollection);
let app = new Vue({
  el: '#app',
  data: {
    n:1000,
    items: new Array(1000).fill(0).map((_, index) => ({ data: '#' + index }))
  },
  methods: {
    cellSizeAndPositionGetter(item, index) {
            // compute size and position
            let min = 100 ;
            let max = 150 ;
            let random = Math.floor(Math.random() * (max + 1 - min) ) + min ;
            return {
                width: 100,
                height: random,
                x: (index % 7) * 110,
                y: parseInt(index / 7) * 160
            }
        }
    },
    watch: {
      n: function(value) {
        this.items = new Array(Number(this.n)).fill(0).map((_, index) => ({ data: '#' + index }));
      }
    }
});

3. テンプレートを準備

<VirtualCollection> タグを設定します。

collection に配列を設定します。

cellSizeAndPositionGetter に要素の位置情報を設定します。
今回は上記の cellSizeAndPositionGetter メソッドで設定しています。

<div id="app">
  <select v-model="n">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
    <option value="500">500</option>
    <option value="1000">1000</option>
  </select>
  <virtual-collection
      :cell-size-and-position-getter="cellSizeAndPositionGetter"
      :collection="items"
      :height="500"
      :width="800"
  >
      <div slot="cell" slot-scope="props">{{props.data}}</div>
  </virtual-collection>
</div>

サンプル

>>専用ページで確認する

さいごに

大規模なコレクションデータを効率的にレンダリングするためのVueコンポーネントライブラリでした。

今日はこの辺でー