VirtualList虚拟列表

首先感谢 Vue3 封装不定高虚拟列表 hooks，复用性更好！这篇文章提供的一些思路，在此基础作者进一步对相关代码进行了一些性能上的优化（解决了通过鼠标操作滚动条时的卡顿）。因为项目没有用到ts，就先去掉了。

hooks

import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";

export default function useVirtualList(config) {
  // 获取元素
  let actualHeightContainerEl = null,
    translateContainerEl = null,
    scrollContainerEl = null;
  // 数据源，便于后续直接访问
  let dataSource = [];

  onMounted(() => {
    actualHeightContainerEl = document.querySelector(
      config.actualHeightContainer
    );
    scrollContainerEl = document.querySelector(config.scrollContainer);
    translateContainerEl = document.querySelector(config.translateContainer);
  });

  // 数据源发生变动
  watch(
    () => config.data.value,
    (newValue) => {
      // 更新数据源
      dataSource = newValue;
      // 计算需要渲染的数据
      updateRenderData();
    }
  );

  /* 
  
  
  
    更新相关逻辑
  
  
  
  */
  // 更新实际高度
  let flag = false;
  const updateActualHeight = (oldValue, value) => {
    let actualHeight = 0;
    if (flag) {
      // 修复偏差
      actualHeight =
        actualHeightContainerEl.offsetHeight -
        (oldValue || config.itemHeight) +
        value;
    } else {
      // 首次渲染
      flag = true;
      for (let i = 0; i < dataSource.length; i++) {
        actualHeight += getItemHeightFromCache(i);
      }
    }
    actualHeightContainerEl.style.height = `${actualHeight}px`;
  };

  // 缓存已渲染元素的高度
  const RenderedItemsCache = {};
  const RenderedItemsCacheProxy = new Proxy(RenderedItemsCache, {
    get(target, key, receiver) {
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      // 更新实际高度
      updateActualHeight(oldValue, value);
      return result;
    },
  });

  // 更新已渲染列表项的缓存高度
  const updateRenderedItemCache = (index) => {
    // 当所有元素的实际高度更新完毕，就不需要重新计算高度
    const shouldUpdate =
      Reflect.ownKeys(RenderedItemsCacheProxy).length < dataSource.length;
    if (!shouldUpdate) return;

    nextTick(() => {
      // 获取所有列表项元素(size条数)
      const Items = Array.from(document.querySelectorAll(config.itemContainer));
      // 进行缓存（通过下标作为key)
      for (let i = 0; i < Items.length; i++) {
        const el = Reflect.get(Items, i);
        const itemIndex = index + i;
        if (!Reflect.get(RenderedItemsCacheProxy, itemIndex)) {
          Reflect.set(RenderedItemsCacheProxy, itemIndex, el.offsetHeight);
        }
      }
    });
  };

  // 获取缓存高度，无缓存，取配置项的 itemHeight
  const getItemHeightFromCache = (index) => {
    const val = Reflect.get(RenderedItemsCacheProxy, index);
    return val === void 0 ? config.itemHeight : val;
  };

  // 实际渲染的数据
  const actualRenderData = ref([]);

  // 更新实际渲染数据
  const updateRenderData = (scrollTop = 0) => {
    let startIndex = 0;
    let offsetHeight = 0;

    for (let i = 0; i < dataSource.length; i++) {
      offsetHeight += getItemHeightFromCache(i);

      // 第几个以上进行隐藏
      if (offsetHeight >= scrollTop - (config.offset || 0)) {
        startIndex = i;
        break;
      }
    }
    // 计算得出的渲染数据
    actualRenderData.value = dataSource
      .slice(startIndex, startIndex + config.size)
      .map((data, idx) => {
        return {
          key: startIndex + idx + 1, // 为了在vue的for循环中绑定唯一key值
          data,
        };
      });

    // 缓存最新的列表项高度
    updateRenderedItemCache(startIndex);

    updateOffset(offsetHeight - getItemHeightFromCache(startIndex));
  };

  // 更新偏移值
  const updateOffset = (offset) => {
    translateContainerEl.style.transform = `translateY(${offset}px)`;
  };

  /* 
  
  
  
    注册事件、销毁事件
  
  
  
  */
  // 滚动事件
  const handleScroll = (e) =>
    // 渲染正确的数据
    updateRenderData(e.target.scrollTop);

  // 注册滚动事件
  onMounted(() => {
    scrollContainerEl?.addEventListener("scroll", handleScroll);
  });

  // 移除滚动事件
  onBeforeUnmount(() => {
    scrollContainerEl?.removeEventListener("scroll", handleScroll);
  });

  return { actualRenderData };
}

vue

<script setup>
import { ref } from "vue";
import useVirtualList from "../utils/useVirtualList.js"; // 上面封装的hooks文件
import list from "../json/index.js"; // 造的数据模拟
const tableData = ref([]);
// 模拟异步请求
setTimeout(() => {
  tableData.value = list;
}, 0);
const { actualRenderData } = useVirtualList({
  data: tableData, // 列表项数据
  scrollContainer: ".scroll-container", // 滚动容器
  actualHeightContainer: ".actual-height-container", // 渲染实际高度的容器
  translateContainer: ".translate-container", // 需要偏移的目标元素,
  itemContainer: ".item", // 列表项
  itemHeight: 400, // 列表项的大致高度
  size: 10, // 单次渲染数量
  offset: 200, // 偏移量
});
</script>

<template>
  <div>
    <h2>virtualList 不固定高度虚拟列表</h2>
    <ul class="scroll-container">
      <div class="actual-height-container">
        <div class="translate-container">
          <li
            v-for="item in actualRenderData"
            :key="item.key"
            class="item"
            :class="[{ 'is-odd': item.key % 2 }]"
          >
            <div class="item-title">第{{ item.key }}条：</div>
            <div>{{ item.data }}</div>
          </li>
        </div>
      </div>
    </ul>
  </div>
</template>

<style scoped>
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
.scroll-container {
  border: 1px solid #000;
  width: 1000px;
  height: 200px;
  overflow: auto;
}
.item {
  border: 1px solid #ccc;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
}
.item.is-odd {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>