Vue3 封装不定高虚拟列表 hooks，复用性更好！

文章预览

点击 关注 公众号，“ 技术干货 ” 及时达！ 前言 某日某时某刻某分某秒，收到 「小 A 同学」 的消息，原因是他司有人反馈某项目中页面渲染内容太慢、太卡，且后端开发也贴出接口响应很快的日志，于是乎这个 「 优化 」 的小任务就落到了他头上。 经过简单询问得知： 页面上某个 「table 组件」 渲染的数据 「不是分页的」 ，接口将查到的所有符合的数据一股脑返回给了前端，约几万条数据 前端页面表现是 「渲染慢、交互卡」 模拟效果（渲染 「3w」 数据）如下： 一：治标不治本-滚动加载 当然 「小 A 同学」 很快就想到了自己实现滚动加载： 「每次渲染20条数据」 ，当滚动条 「触底后继续渲染」 于是马上进行提测，而测试同学也非常的敬业，一直滚动加载到了 「几千条」 数据，此时虽然在渲染表格项的时候没有出现卡顿，但 ………………………………