vue 渲染大量数据时应该怎么优化? By @Mark-yangyx on Dec 10, 2019原文:vue 渲染大量数据时应该怎么优化? - 每天一个JavaScript小知识@Js中文网 · 码农进阶题库原文地址:https://www.javascriptc.com/interview-tips/zh_cn/vue/vue-large-amounts-of-data/优化方案1:按需加载局部数据, 虚拟列表,无限下拉刷新js运行异步处理: 分割任务,实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms大量纯展示的数据,不需要追踪变化的 用object.freeze冻结(可以使用虚拟列表,Object.freeze冻结对象,Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set,但是缺点是不能响应了)数据量大的时候,可以做分页处理。翻页一次请求10-20条数据优化方案2:如果一次性传入大量数据建议:先打死提供数据的人 ^ v ^~ (推荐)如果打不过自己架设中间层SPA + SSR处理 bigpipe (服务器渲染组件总比浏览器强,毕竟那么多核的CPU也不是花瓶)可以考虑stream(我还没看用过…)增加加载动画提升用户体验同时避免浏览器处理大量的dom(具体看下面)尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据如果并非一次性传入大量数据 而只是分段加载 但次数特别多异步渲染组件使用vue的v-if 最多显示上中(可视区域)下三屏 避免出现大量的dom节点或者使用分页(体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”)可以参考 https://github.com/dwqs/blog/issues/70优化方案3 ?::point_down:~~~~ 欢迎在下方评论补充你的答案,一起来学习~:pushpin:扩展阅读:Vue源码解析之数组变异vue.js - vue——数组的深度监听 思否为什么 Vue3.0 不再使用 defineProperty 实现数据监听?原文标题:vue 渲染大量数据时应该怎么优化? - 码农题库@Js中文网 · 前端进阶资源教程原文地址:https://www.javascriptc.com/interview-tips/zh_cn/vue/vue-large-amounts-of-data/