Vue3|性能优化之虚拟列表

RecycleScroller虚拟列表的实战。

背景

当渲染大型列表时，由于浏览器需要处理大量的 DOM 节点，会带来页面卡顿、内存占用过高等问题。此时可以通过将列表虚拟化技术，即只渲染可见区域内的数据项，而不是全部渲染，且在滚动过程中移除旧的添加新的，这样无论列表有多少项，只会有一小部分在DOM中，从而提高性能和内存效率、保持流畅的滚动体验。

vue-virtual-scroller正是一个实现了列表和表格虚拟滚动的社区库，主要提供两个组件：

RecycleScroller ：一个基础的虚拟滚动列表，需要item高度是固定的
DynamicScroller ：一个更高级的虚拟滚动列表，可以处理动态的item高度

这里以RecycleScroller为例，先安装和导入：

// 安装
npm install --save vue-virtual-scroller@next
// 导入RecycleScroller
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
app.component("RecycleScroller", RecycleScroller);

RecycleScroller实战

RecycleScroller提供很多属性，主要使用到以下四个核心属性，接下来依次解释：

<RecycleScroller
  v-slot="{ item, index, active }"
  :items="items"
  :item-size=""
  key-field=""
>
  <div class="item-root">
    ...
  </div>
</RecycleScroller>

v-slot

当前渲染item的相关信息，提供信息包括：

item：当前渲染的item数据，即items[index]
index: 当前渲染的item所在位置
active：当前渲染的item是否可见

items

必填，渲染的列表数据源。注意，如果数据源有变化，比如上拉刷新、下拉加载更多，此时需要修改items属性，否则RecycleScroller不会更新items，参考官方demo的做法：

const items = computed(() => {
  return props.list.map((item) =>
    Object.assign({}, { random: Math.random() }, item),
  );
});

item-size

必填，item的高度。若有必要需适配手机端和网页端。

key-field

关键属性名，这个属性是item唯一标识，默认名称是id。一般在数据会有提供如key、id、index这样的属性，如果都没有的话，需要对源数据进行加工补充一个id属性。如果不存在这个属性或属性值不唯一，会发现列表存在空白项，即渲染异常的item。

const items = computed(() => {
  return props.list.map((item, index) =>
    Object.assign({}, { id: `test-${index}` }, item),
  );
});

实际应用一下，现在有这样一个长列表，可以看到dom树很长：

template

在这个例子中还有一处细节，就是滑动效果发生变化了，可以看到原来只有一个页面整体的滑动条（右），现在内部多了一个的滑动条（左）：

这个很好理解，RecycleScroller本身也要知道渲染视图和滚动位置，如果想和原有保持一致，也就是将列表上方的信息和列表拼接一起成为一个整体，只要将头部信息填空到#before中即可，代码如下：

<RecycleScroller
  class="output-content-container"
  :item-size="isMobileRef ? 100 : 75"
  :items="items"
>
  <template #before>
    ...
  </template>

  <template v-slot="{ item }">
    <div class="output-item-root">
      ...
    </div>
  </template>
</RecycleScroller>

网格布局

RecycleScroller还可以实现网格布局，还要涉及两个关键属性：

item-secondary-size：item宽度，未设置时会使用item-size的值
grid-items：一行展示的个数，即列数

比如优化这样一个网格列表：

修改前：

<div class="content-gridview">
  <div
    v-for="(item, index) in items"
    class="content-grid-item"
    @click="onChooseItem(item)"
  >
    ... 
  </div>
</div>

.content-gridview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
  max-height: 600px;
}

修改后：

<RecycleScroller
  v-slot="{ item, index }"
  :item-secondary-size="360"
  :item-size="90"
  :items="items"
  :grid-items="2"
  key-field="indexId"
  class="content-gridview"
>
  <div class="content-grid-item" @click="onChooseItem(item)">
    ... 
  </div>
</RecycleScroller>

.content-gridview {
  max-height: 600px;
}
.content-grid-item {
  ...
  margin-right: 10px;
}

由于不支持设置grid-gap，这里通过给item设置右间距方式实现的，最终效果：

Vue3|性能优化之虚拟列表