持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
前言
小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第39题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！
学习群
我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~
相关学习资源
本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~
- 视频教程：56道经典Vue面试题详解
- 思维导图：Vue面试专题
- 配套代码：vue-interview
39-使用vue渲染大量数据时应该怎么优化？说下你的思路！
分析
企业级项目中渲染大量数据的情况比较常见，因此这是一道非常好的综合实践题目。
思路
- 描述大数据量带来的问题
- 分不同情况做不同处理
- 总结一下
回答
-
在大型企业级项目中经常需要渲染大量数据，此时很容易出现卡顿的情况。比如大数据量的表格、树。
-
处理时要根据情况做不通处理：
- 可以采取分页的方式获取，避免渲染大量数据
- vue-virtual-scroller等虚拟滚动方案，只渲染视口范围内的数据
- 如果不需要更新，可以使用
v-once方式只渲染一次 - 通过v-memo可以缓存结果，结合
v-for使用，避免数据变化时不必要的VNode创建 - 可以采用懒加载方式，在用户需要的时候再加载数据，比如tree组件子树的懒加载
-
总之，还是要看具体需求，首先从设计上避免大数据获取和渲染；实在需要这样做可以采用虚表的方式优化渲染；最后优化更新，如果不需要更新可以v-once处理，需要更新可以v-memo进一步优化大数据更新性能。其他可以采用的是交互方式优化，无线滚动、懒加载等方案。