Vue面试题40：使用Vue渲染大量数据时应该如何优化，请说说思路（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析

  • 企业级项目中渲染大量数据的情况比较常见，因此这是一道非常好的综合实践题目；既然说思路，就可以分不同情况说说解决方法；

• 思路

  • 1.描述大数据量带来的问题
  • 2.分不同情况做不同处理
  • 3.总结一下

• 回答

  • 1.在大型企业级项目中经常需要渲染大量数据，此时很容易出现卡顿的情况。比如大数据的表格、树等；
  • 2.处理时要根据情况做不同的处理：
    • 避免大数据量：可以采取分页的方式获取；
    • 避免渲染大量数据：可以使用vue-virtual-scroller等虚拟滚动方案，只渲染视口范围内的数据；
    • 避免更新：如果数据不需要更新，可以使用v-once方式只渲染一次；
    • 优化更新：如果避免不了更新，可以通过v-memo缓存子树，有条件更新，提高复用，避免不必要更新；
    • 按需加载数据：可以采用懒加载方式，在用户需要的时候再加载数据，比如tree组件子树的懒加载；
  • 总之，还是要看具体需求，首先从设计上避免大数据获取和渲染；实在需要这样做可以采用虚表的方式优化渲染数量；最后优化更新，如果不需要更新可以使用v-once避免更新，需要更新可以使用v-memo进一步优化大数据更新性能；除此之外可以采用的是交互方式优化，无线滚动、懒加载等方案；