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

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

优化方案3：

• 在赋值data前把数据冻结即可 

this.list = Object.freeze(list)

由于数据被冻结，所以vue无法深度遍历数据给数据添加get和set属性，这样就减少了数据监听带来的问题，而且在大数据量的情况下Object.freeze()非常有用

Object.freeze()方法可以冻结一个对象，一个被冻结的对象再也不能被修改，当然你可以将变量的引用替换掉

不能添加新属性
不能删除已有属性
不能修改已有属性的可枚举性、可配置性、可写性
不能修改已有属性的值
不能修改原型