Vue 2 スクロール最適化
紹介
Vue 2の仮想DOMの diff メカニズム（両端diff）のため、Vue 2の仮想リストで下にスクロールすると、テーブル内のすべてのtr要素が更新されます。
上にスクロールすると、新しいtr要素がテーブル上部に追加され、tr要素がテーブル末尾から削除されます。これは正しいです。
下にスクロールすると、上にスクロールするよりも明らかに遅延を感じます。
したがって、この最適化を実装して、マウスホイールでの上下スクロールが同様に感じられるようにします。
設定
props.optimizeVue2Scroll を使用してVue 2スクロール最適化を有効にします。
vue
<StkTable optimize-vue2-scroll></StkTable>最適化原則
下にスクロールすることは2つのアクションに分解されます：
- テーブル下部に新しいtr要素を追加します。
- 短い遅延後に上部からtr要素を削除します。
つまり、まず仮想リストの startIndex を変更せずずに維持し、短時間後にターゲット値に変更します。これはVue 2のdiffメカニズムに有利であり、不必要なDOM更新を減らしてスクロールパフォーマンスを向上させます。
TIP
マウスのドラッグスクロールバーで大規模なドラッグをする場合、この最適化schemeを適用すると、多くのノードが生成されます。DOMノード数を制御するために、この操作は最適化されません。