vue完成虚拟内容以及通过resizeObserver完成图片添加监听

达到目标效果

1 使用虚拟列表加载大量数据以防止滚动。
2 处理一般业务复杂场景的不确定高列表场景。

设计思路

实施思路：
高级虚拟列表实现得很好，如果您想考虑高级场景，则需要其他解决方案。
1 例如，现有数据1000条形图，首先假设每行数据占据100px，即总列表高度为100*1000px以这种方式计算的高度可以首先假定滚动条容器的高度，并用诸如每个元素的高度之类的数据维护数组对象。
2 知道高度后，我们需要通过可视窗口高度加载第一页的数据。/每个可视窗口加载的数据量在每个估计高度都可用。
3 现在可以加载第一页中的视觉数据了，但根据之前的想法，当前高度是由我们计算的，而不是实际高度。因此，我们需要高度获取已加载的数据，并更新之前维护的高度列表。

常规的不确定虚拟列表就在这里，基本功能已经可以实现了。然而，我们没有考虑到虚拟列表可能存在列表中大型图片加载缓慢的问题。页面中获得的高度可能是图片加载前的高度。

所以我们需要借钱resizeObserver高度监控视觉元素
实现：

通过vue3的update生命周期高度监控每个新元素并解除历史元素的绑定。当元素刚刚加载图片时，我们会得到一个错误高度，我们将在图片加载后开始。resize然后传递回调函数。target获取加载图片的高度（即使高度动态更改），并更新我们之前维护的数组对象数据。

我会直接输入仓库地址，本地运行后您可以看到。

虚拟滚动vue3的demo