vue大数据量列表渲染性能优化：虚拟滚动原理

前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。

前端分页小节：Vue3扁平化Tree组件的前端分页实现

节点数据懒加载小节：Element Tree Plus版功能演示：数据懒加载

关于扁平化结构Tree和嵌套结构Tree组件的渲染

嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于这种渲染方式，在数据量很大的情况下，只有通过懒加载可以提高渲染性能；而扁平化结构则有更多的选择，前端分页是一种方式，还有一种更好的选择，就是本节介绍的虚拟滚动。

下一小节，我们将对自定义JuanTree组件来应用虚拟滚动，解决数据量非常大的情况下的用户体验良好的高性能渲染。本小节讲原理和基本demo的实现，喜欢的点个赞，关注下，后续会更精彩！

功能演示

虚拟滚动的原理

demo实现

编写vitepress示例

滚动条的实现

考虑到原生滚动条太丑，我们使用element-plus提供的el-scrollbar组件，因为它简单好用且展示也很美观。

element plus在基于vite的vue3 tsx项目的整合请参考：vite tsx项目的element plus集成 - 按需引入踩坑

demo示例源码

src/components/VirtualList.vue

实现非常简单易懂！

<script setup lang="ts">
import {
      computed, ref } from 'vue'

const containerHeight = 24 * 12