Vue3 - 详细实现虚拟列表前端虚拟滚动列表解决方案，vue3长列表优化之虚拟列表，解决列表动态高度不固定高度及图片视频图文异步请求加载问题，虚拟列表DOM大量数据同时加载渲染卡顿太慢及下滑列表闪烁

前言

Vue2 版本，请访问 这篇文章

在 vue3 项目开发中，详解实现虚拟列表高度不固定(不定高)且复杂含有图片视频等复杂虚拟列表教程，决列表每项高度不确定及img图像或视频的加载方案，利用缓冲区技术解决用户浏览时渲染不及时列表闪烁白屏/列表加载闪屏，解vue3实现虚拟列表优化大数据量的渲染效率提升页面加载速度，优化长列表由于数据过多导致 dom 渲染加载非常慢，虚拟列表解决页面渲染超多数据时卡顿加载慢情况，组件库表格Table虚拟列表也可用。

---

如下图所示，PC电脑和手机H5都能用且支持动态高度不定高/图片视频复杂虚拟列表。

详细代码，保证搞定

解决方案

具体实现思路及代码如下，请直接复制运行测试即可。