Vue-virtual-scrollerを使用したVue.jsのパフォーマンスリストとテーブル

開発者は、ページネーションなしで大量のデータを読み込むか、無限スクロールページネーションを使用して数回スクロールすることにより、アプリの大きなリストまたはテーブルを実装する必要がありました。これらのリストやテーブルは、特に要素、CSSスタイル、トランジションがたくさんある場合、遅くなる可能性があります。

vue-virtual-scroller は、プレーンHTML ul > liであるかどうかに関係なく、リストをDOMにパフォーマンス的にレンダリングするために、仮想スクロール手法を適用するVue.jsプラグインです。 ]リスト、テーブル、またはカスタマイズされたリスト。

vue-virtual-scrollerをセットアップする

基本的なVue.jsプロジェクトを作成したら、npmからプラグインをインストールすることから始めます。

$ npm install -D vue-virtual-scroller

次に、 main.js ファイルにCSSファイルを含めて、初期化する必要があります。

main.js

import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import Vue from "vue";
import VueVirtualScroller from "vue-virtual-scroller";

Vue.use(VueVirtualScroller);
// ...

それはそれを使い始めるのに十分なはずです。

VirtualListの作成

簡単な例から始めて、大量のデータを取得し、vue-virtual-scrollerを使用してレンダリングするプレーンリストを作成しましょう。

JSON-Generator を使用して5000エントリのJSONを生成し、data.jsonファイルに保存してみましょう。次の構造を使用できます。

[
  '{{repeat(5000)}}',
  {
    _id: '{{objectId()}}',
    age: '{{integer(20, 40)}}',
    name: '{{firstName()}} {{surname()}}',
    company: '{{company().toUpperCase()}}'
  }
]

VirtualList.vue ファイルを作成してみましょう。ここで、 data.json をインポートし、itemsコンポーネントの状態プロパティに追加します。次に、<virtual-scroller>コンポーネントを使用して、これらのアイテムを渡します。

VirtualList.vue

<template>
  <virtual-scroller :items="items" item-height="40" content-tag="ul">
    <template slot-scope="props">
      <li :key="props.itemKey">{{props.item.name}}</li>
    </template>
  </virtual-scroller>
</template>

<script>
import items from "./data.json";

export default {
  data: () => ({ items })
};
</script>

item-heightを仮想スクローラーコンポーネントに設定する必要があります。または、リストを作成しているので、コンテンツを<ul>タグにラップするcontent-tag="ul"を設定しました。

vue-virtual-scrollerを使用すると、スコープスロットを使用してコンテンツをレンダリングし、レンダリングの柔軟性を最大限に高めることができます。 slot-scope="props"を使用することで、仮想スクローラーで公開されたデータにアクセスし、レンダリングに使用できます。

propsには、パフォーマンス上の理由から、コンテンツのルートで:key="props.itemKey"を使用してバインドする必要があるitemKeyプロパティが含まれています。次に、itemsプロパティを介してvirtual-scrollerに渡したJSONからの生のアイテムを含むprops.itemにアクセスできます。

リスト内の要素のスタイルを設定する場合は、class属性をvirtual-scrollerコンポーネントに追加して、その内容にアクセスできます。

<template>
  <virtual-scroller class="virtual-list" ...></virtual-scroller>
</template>

<style>
.virtual-list ul {
  list-style: none;
}
</style>

または、スコープスタイルでは、/deep/セレクターを使用します。

<style scoped>
.virtual-list /deep/ ul {
  list-style: none;
}
</style>

VirtualTableの作成

VirtualList コンポーネントと同様に、テーブルのVirtualTable.vueファイルを作成しましょう。

VirtualTable.vue

<template>
  <virtual-scroller :items="items" item-height="40" content-tag="table">
    <template slot-scope="props">
      <tr :key="props.itemKey">
        <td>{{props.item.age}}</td>
        <td>{{props.item.name}}</td>
        <td>{{props.item.company}}</td>
      </tr>
    </template>
  </virtual-scroller>
</template>

<script>
import items from "./data.json";

export default {
  data: () => ({ items })
};
</script>

この例で問題が発生しました。 Age 、 Name 、 Company の列名を表示するために、テーブルヘッダーとして<thead>タグを追加します。

幸い、virtual-scrollerは、次のスロット構造を使用して内部コンテンツを配布します。

<main>
  <slot name="before-container"></slot>
  <container>
    <slot name="before-content"></slot>
    <content>
      <!-- Your items here -->
    </content>
    <slot name="after-content"></slot>
  </container>
  <slot name="after-container"></slot>
</main>

これらのスロットのいずれかを使用して、そこにコンテンツを配置できます。 containerは、container-tagプロパティのタグ値（デフォルトではdiv）に置き換えられ、contentはcontent-tag値に置き換えられます。

したがって、before-contentスロットを使用してtheadを簡単に追加できます。

<template>
  <virtual-scroller
    :items="items"
    item-height="40"
    container-tag="table"
    content-tag="tbody"
    >
      <thead slot="before-content">
        <tr>
          <td>Age</td>
          <td>Name</td>
          <td>Company</td>
        </tr>
      </thead>
      <template slot-scope="props">
        <tr :key="props.itemKey">
          <td>{{props.item.age}}</td>
          <td>{{props.item.name}}</td>
          <td>{{props.item.company}}</td>
        </tr>
      </template>
  </virtual-scroller>
</template>

より多くの要素を使用しているため、通常のテーブル構造を維持するために、container-tag="table"およびcontent-tag="tbody"のcontent-tag="table"を変更したことに注意してください。

tfoot要素を追加する方法も想像できると思います😉。

まとめ

vue-virtual-scrollerプラグインを使用して、VirtualListおよびVirtualTableのコンポーネントを作成しました。生成した5000個のアイテムで試してみると、レンダリングとスクロールが非常にスムーズになります。 vue-virtual-scroller docs をチェックして、その他のオプションとカスタマイズを確認してください。

この記事の動作コードは、このCodesandoxで確認できます。

涼しくしてください🦄