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

[susouth]

📚在线阅读:vue 渲染大量数据时应该怎么优化？ - No.77

优化方案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. 可以参考 浅说虚拟列表的实现原理 dwqs/blog#70

优化方案3 ?：

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

扩展阅读：

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

[susouth]

优化方案1：

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