使用vue渲染大量数据时应该怎么优化?
Object.freeze
适合一些 big data的业务场景。尤其是做管理后台的时候,经常会有一些超大数据量的 table,或者一个含有 n 多数据的图表,这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化,这时候你就可以使用 Object.freeze 方法了,它可以冻结一个对象(注意它不并是 vue 特有的 api)。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter,它们让 Vue 能进行追踪依赖,在属性被访问和修改时通知变化。
使用了 Object.freeze 之后,不仅可以减少 observer 的开销,还能减少不少内存开销。 使用方式:this.item = Object.freeze(Object.assign({}, this.item))
使用vue渲染大量数据时应该怎么优化?的更多相关文章
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- 【vue】渲染大量数据时性能优化
对应vue渲染大量数据时可以考虑下面几点: 1. 异步渲染组件:因为组件渲染太多,影响页面的渲染时间,所有可以延迟组件渲染,可以考虑v-if处理 2. 可以使用虚拟滚动的组件:参考使用这个插件 vue ...
- vue再页面渲染json数据时没有显示
对象点属性不能获取数据. 原因: 在创建数据对象时我使用了k,v方式:tempMap['category '] = this.category[i].label 如果在创建数据时使用的k,v方式,那么 ...
- MySQL处理达到百万级数据时,如何优化?
1.两种查询引擎查询速度(myIsam 引擎 ) InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from table时,InnoDB要扫描一遍整个表来计算有多少行. ...
- Vue渲染数据理解以及Vue指令
一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...
- vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案
vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...
- Vue 使用 axios post请求后台数据时 404
今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法,传送门:https://www.jianshu.com/p/b10 ...
- Vue v-for嵌套数据渲染问题
Vue v-for嵌套数据渲染问题 问题描述: 由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用 问题原因: vue在处理多层的渲染的时候,不能直接用等号赋 ...
- 解决vue渲染时闪烁{{}}的问题
原文转自: 点我 Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也 ...
- debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误
因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...
随机推荐
- 10分钟搞定简易MVVM
实现一个简易的 MVVM 分为这么几步来 1.类 Vue:这个类接收的是一个 options. el属性:根元素的id data属性:双向绑定的数据. 2.Dep 类: subNode数组:存放所依赖 ...
- fast planner总结
一.前端 kinodynamic A*算法动力学路径搜索 1.1 路径搜索的主要函数为kinodynamicAstar类的search函数 int KinodynamicAstar::search(E ...
- app实现外部浏览器打开链接
需求:安卓和IOS开发的混合app.前端使用vue,vant2,安卓使用java,ios使用的object-c.实现效果:点击按钮,下载PDF附件,app跳转到手机外部浏览器,下载附件...... 1 ...
- 安装KaLi操作系统并优化
安装KaLi操作系统并优化 1. 开启ROOT登录 安装操作系统跳过,下面直接做系统优化,方便以后使用! 有两种方法,可以实现开机以root身份登录kali系统. 第一种方法如下: 在终端下输入所需命 ...
- JZOJ 3252. 【GDOI三校联考】炸弹
思路 注:上图只是个例子,其实建图时 \(5\) 是不会连向 \(6\) 的 \(Code\) #include<cstdio> #include<cstring> #incl ...
- Linux CentOS 7 磁盘扩容(原有磁盘扩容,非新增磁盘)
背景: 接上篇 https://www.cnblogs.com/si-yuan/p/17148835.html,只是展示出了磁盘大小,还需进行如下操作,去完成原有磁盘的扩容. ----------- ...
- Java面向对象进阶第一天
面向对象高级第一天 static关键字 是静态的意思,可以修饰成员变量,也可以修饰成员方法 成员变量的分类 静态成员变量 有static修饰,属于类,与类一起加载,内存中只有一份,可以被共享访问. 什 ...
- 用ChatGPT,绘制一个账号系统的C4架构图
hi,我是熵减,见字如面. 昨天我们用ChatGPT来设计一个账号系统,并尝试输出:模型表,类关系图,序列图,状态图等常用的架构设计中常用的元素. 今天,我们继续向更高层级延伸一下,看ChatGPT能 ...
- Cobalt Strike 之: Malleable C2 流量伪造与加密
郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. 目录 ...
- c# 使用 Redis
1.安装Redis 我是在Windows上安装redis的,Redis官网我只看到linux版本的,得使用别人提供的windows版本 菜鸟教程提供的redis下载地址:https://github. ...