持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
这道题是面试中常见的题型，这个问题也可以描述为：“使用vue渲染大量数据时应该怎么优化，请说出具体的思路？”
长列表的情况在实际工作中遇到的几率还是挺大的，下面我们来具体说一下解决思路。
问题成因
大数据很长的列表，全部渲染的话一次性创建太多 DOM 就会导致页面非常卡顿。比如大数据表格，或节点很多的树
解决方案
在处理的过程中，要根据具体的情况做不同的处理，以下从五个方面进行分析：
（1）尽量避免大数据量
这时我们可以使用分页加载的方式获取
（2）避免渲染大量数据
可以使用 vue-virtual-scroller 等虚拟滚动方案，只渲染视口范围内的数据。只渲染少部分(含可视区域)区域的内容，然后滚动的时候，不断替换可视区域的内容，模拟出滚动的效果，这样内存的消耗就不会太大。
原理就是监听滚动事件，动态更新需要显示的 DOM，并计算出在视图中的位移，这也意味着在滚动过程需要实时计算，有一定成本，所以如果数据量不是很大的情况下，用普通的滚动就行
（3）避免更新
可以使用 v-once 这种指令只渲染一次，这种也会存在问题，数据量太大的时候初次渲染的时间可能比较长，但减少了数据变化时的更新频次。
（4）优化更新
当无法避免更新的时候呢，就通过 v-memo 指令缓存子树，在指定条件下更新，提高复用，避免不必要的更新。
（5）按需加载数据
可以采用懒加载的方式，在用户需要的时候再加载数据，比如 tree 组件子树的懒加载。
总结
在实际项目中要尽量鼻尖大数据获取和渲染，如果确实需要这样做可以采用虚表的形式优化渲染数量；最后优化更新，如果不需要更新可以使用 v-once 避免更新，需要更新的可以用 v-memo 进行缓存，当数据变化时再进行更新，从而提高数据更新性能。其他的可以采用交互方式优化，虚拟滚动、懒加载等。
