你有没有遇到过那种情况？

就是你打开一个页面里面密密麻麻全是数据，一滑就卡，一动就崩，浏览器直接卡死，甚至崩溃。

害，谁还没被卡过呢？

尤其是那种动不动就几万、十几万条数据的场景，比如后台管理系统里的数据报表、监控平台的实时日志、或者一些电商后台的订单列表……

你要是直接用 v-for 暴力渲染，那可就惨了。

不信你kan：

你猜怎么着？

浏览器直接给你上一堂“性Neng优化课”——

内存占用飙升，DOM 节点爆炸，滚动卡成 PPT，帧率掉到个位数，用户体验？不存在的。

那咋办？

别急，咱今天就来聊聊 Vue3 虚拟列表，这玩意儿就是来救场的。

虚拟列表是啥？

说白了虚拟列表就是一种“按需渲染”的技术。

你懂的，就是只渲染用户**kan得到**的那部分数据，其他kan不见的，就用一个“占位符”撑开滚动条，假装它们在那儿。

这样，哪怕你有 10 万条数据，也只渲染你当前屏幕里那几十条。

你说这性NengNeng不飞起来吗？

对，就是这么简单粗暴。

原理其实不复杂

咱就是说核心思想就俩字：**懒加载**。

你不是要渲染 10 万条数据吗？

好，我先给你一个大容器，高度是假的，撑开滚动条用的。

然后我只渲染你眼睛Nengkan到的那几条，其他dou先不渲染。

你一滚动，我就重新算，把新进视野的几条数据渲染出来把滚出去的那几条删掉。

就这么简单。

你想想，10 万条数据，每条 30px，那得多少 DOM 节点？

现在呢？

我只渲染 30 条，性Neng直接起飞，内存占用降下来帧率稳如老狗。

Vue3 + 虚拟列表 = 王炸

Vue3 的组合式 API + TypeScript，简直就是为虚拟列表量身定Zuo的。

咱直接上代码，kankan这个组件长啥样：

是不是kan着有点懵？

别急，咱慢慢来。

这个组件里有三个关键部分：

container就是你kan到的滚动容器

phantom用来撑开滚动条的“幽灵”元素

content真正渲染数据的地方

你滚动的时候，它会根据 scrollTop 算出当前应该显示哪些数据，然后只渲染这些数据。

你再kankan这个：

const visibleData = computed => {
  return props.items.slice.map => ({
    ...item,
    index: startIndex.value + idx
  }))
})

对，就是这么简单。

你滚动的时候，它就只geng新那一小段数据，其他不动。

你说这性NengNeng不快吗？

性Neng测试数据

咱来点实打实的数据：

指标	普通列表	虚拟列表
初始渲染时间	约 2800ms	约 45ms
DOM 节点数量	100,000 个	约 60 个
内存占用	约 30MB	约 1MB
滚动帧率	平均 10-15 fps	稳定 60 fps

你kan，这差距，简直了。

普通列表直接把浏览器干趴了虚拟列表稳如老狗。

动态高度？也Neng搞

当然现实场景中，列表项高度不固定的情况也挺多的。

比如评论区、动态内容、图文混排……

这时候你就得用动态高度的虚拟列表了。

原理也差不多，就是多维护一个高度数组，记录每项的真实高度，然后动态计算偏移量。

代码稍微复杂点，但核心思想没变。

你要是不想自己写，也Ke以用现成的库，比如 vue-virtual-scroller，效果也挺不错的。

滚动加载？也支持

虚拟列表还Neng和滚动加载无缝结合。

你只需要监听滚动事件，判断是否快到底部了然后触发加载geng多数据的逻辑。

比如这样：

是不是hen香？

一下

虚拟列表，就是为了解决“大数据量渲染”这个老大难问题的。

它通过只渲染可视区域，大大减少了 DOM 节点数量，降低了内存占用，提升了滚动性Neng。

你说这玩意儿是不是前端性Neng优化的“神器”？

对，就是这么个东西。

下次面试官再问你“怎么渲染 10 万条数据”，你就Ke以掏出这段代码，然后说：

“我用虚拟列表，性Neng稳得一批。”

你懂的，技术这玩意儿，就是得会点“偷懒”的艺术。

虚拟列表，就是前端的“懒人神器”。

好了今天就聊到这儿，下次再给你讲点别的性Neng优化小技巧，比如懒加载、防抖节流、虚拟滚动容器复用……

你要是觉得这玩意儿对你有帮助，别忘了点个赞、收藏一下让geng多人告别长列表性Neng焦虑！

---