虚拟滚动（Virtual Scrolling）

虚拟滚动（Virtual Scrolling）

问题：
渲染 10,000 条消息？浏览器直接卡死！

解决方案：
只渲染“当前可见区域”的内容，滑动时动态替换，内存和性能都省下来。

推荐库（Vue 3 兼容）：

• vueuc（轻量、活跃维护）
• vue-virtual-scroll-grid

安装 & 示例（以 vueuc 为例）：

 

安装：npm install vueuc

示例：
<script setup>
　　import { VirtualList } from 'vueuc';
</script>

<template>
  <VirtualList :items="messages" :item-height="60" :bench="10">
    <template #default="{ item }">
      <MessageItem :msg="item" />
    </template>
  </VirtualList>
</template>

类比：
就像微信聊天记录——你往上滑，旧消息才加载；不滑的时候，几千条其实没真画出来。

作者：程序员大华
链接：https://juejin.cn/post/7595403248595664896
来源：稀土掘金