vueJs 渲染大量数据时应该怎么优化？

优化方案1：

• 按需加载局部数据, 虚拟列表，无限下拉刷新
• js运行异步处理: 分割任务，实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms
• 大量纯展示的数据,不需要追踪变化的 用object.freeze冻结（可以使用虚拟列表，Object.freeze冻结对象，Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set，但是缺点是不能响应了）
• 数据量大的时候，可以做分页处理。翻页一次请求10-20条数据

优化方案2：

• 如果一次性传入大量数据
• 建议：
  1. 先打死提供数据的人 ^ v ^~ （推荐）
  2. 如果打不过自己架设中间层
  3. SPA + SSR处理 bigpipe （服务器渲染组件总比浏览器强，毕竟那么多核的CPU也不是花瓶）
  4. 可以考虑stream（我还没看用过…）
  5. 增加加载动画提升用户体验
  6. 同时避免浏览器处理大量的dom（具体看下面）
  7. 尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据
• 如果并非一次性传入大量数据 而只是分段加载 但次数特别多
  1. 异步渲染组件
  2. 使用vue的v-if 最多显示上中（可视区域）下三屏 避免出现大量的dom节点
  3. 或者使用分页（体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”）
  4. 可以参考 https://github.com/dwqs/blog/issues/70

优化方案3 ?：

:point_down:~~~~ 欢迎在下方评论补充你的答案，一起来学习～:pushpin:

扩展阅读：

• Vue源码解析之数组变异
• vue.js – vue——数组的深度监听 思否
• 为什么 Vue3.0 不再使用 defineProperty 实现数据监听？