Vue3 封装不定高虚拟列表 hooks，复用性更好！

1. 封装虚拟列表的hooks

1.1 定义配置接口

在封装虚拟列表的hooks时，定义清晰的配置接口是关键。配置接口应该包括但不限于以下几个方面：

• items: 数据源数组，每个元素代表列表中的一个项。
• itemHeight: 列表项的高度，可以是固定值或函数，用于动态计算高度。
• overscan: 预渲染的DOM节点数量，用于在快速滚动时减少空白和抖动。
• scrollContainer: 滚动容器的选择器或引用，用于监听滚动事件。
• actualHeightContainer: 用于撑开高度的容器选择器或引用，确保虚拟列表的总高度与实际数据量相匹配。
• tranlateContainer: 用于偏移的容器选择器或引用，确保渲染的数据始终处于可视区。

1.2 实现虚拟列表的核心逻辑

虚拟列表的核心逻辑包括以下几个步骤：

• 初始化: 根据配置接口初始化虚拟列表的状态，包括可视项的起始索引、结束索引和渲染的数据项。
• 滚动监听: 监听滚动容器的滚动事件，根据滚动位置动态计算可视项的索引范围。
• 数据渲染: 根据计算出的索引范围，从数据源中切片获取当前需要渲染的数据项。
• DOM更新: 更新DOM以反映当前可视的数据项，包括动态设置列表项的高度和偏移量。

</