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渲染大量数据时应该怎么优化?的更多相关文章

  1. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  2. 【vue】渲染大量数据时性能优化

    对应vue渲染大量数据时可以考虑下面几点: 1. 异步渲染组件:因为组件渲染太多,影响页面的渲染时间,所有可以延迟组件渲染,可以考虑v-if处理 2. 可以使用虚拟滚动的组件:参考使用这个插件 vue ...

  3. vue再页面渲染json数据时没有显示

    对象点属性不能获取数据. 原因: 在创建数据对象时我使用了k,v方式:tempMap['category '] = this.category[i].label 如果在创建数据时使用的k,v方式,那么 ...

  4. MySQL处理达到百万级数据时,如何优化?

    1.两种查询引擎查询速度(myIsam 引擎 ) InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from table时,InnoDB要扫描一遍整个表来计算有多少行. ...

  5. Vue渲染数据理解以及Vue指令

    一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...

  6. vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案

    vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...

  7. Vue 使用 axios post请求后台数据时 404

    今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法,传送门:https://www.jianshu.com/p/b10 ...

  8. Vue v-for嵌套数据渲染问题

    Vue v-for嵌套数据渲染问题 问题描述: 由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用 问题原因: vue在处理多层的渲染的时候,不能直接用等号赋 ...

  9. 解决vue渲染时闪烁{{}}的问题

    原文转自: 点我 Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也 ...

  10. debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误

    因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...

随机推荐

  1. JAVA虚拟机15---虚拟机的类加载机制

    1.概述 在Class文件中描述的各类信息,最终都需要加载到虚拟机中之后才能被运行和使用.而虚拟机如何加载这些Class文件,Class文件中的信息进入到虚拟机后会发生什么变化,这就涉及到虚拟机的类加 ...

  2. 【TS】object类型

    object是一个对象,在ts中定义对象类型的语法为:let 变量名 :object = { } 在object类型中,对象内部定义的值是不受类型约束的,只要是一个object类型即可,例如: let ...

  3. (三) MdbCluster分布式内存数据库——节点状态变化及分片调整

    (三) MdbCluster分布式内存数据库--节点状态变化及分片调整   上一篇: (二) MdbCluster分布式内存数据库--分布式架构   昨天我们在测试节点动态扩缩容时,发现了一个小bug ...

  4. 【KAWAKO】MNN-将推理程序交叉编译成RK1126的可执行文件

    目录 得到RK交叉编译器 将交叉编译器添加进path 对MNN进行交叉编译 对自己的工程进行交叉编译 将编译好的可执行文件和.so动态库放入板子中运行 得到RK交叉编译器 主要用到这两个,一个gcc的 ...

  5. C#/VB.NET 如何在 Word 文档中添加页眉和页脚

    页眉位于文档中每个页面的顶部区域,常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等:页脚位于文档中每个页面的底部的区域,常用于显示文档的附加信息,可以在页脚中插入文 ...

  6. 【PyQt5学习-03-】PyQt5 控件概念

    快速开发:先看控件的功能,再根据需要选学 1.什么是控件 程序界面上的元素 各自独立 一块矩形区域 具有的功能 接收用户输入 用户点击 显示内容 放置其他控件 先学常用控件 基础控件 按钮 输入控件 ...

  7. opc ua与opc da区别

    opc ua与opc da区别_OPC,OPCDA,OPCUA傻傻搞不清楚,走过路过不妨看一看 转自:https://blog.csdn.net/weixin_39624774/article/det ...

  8. wandb: Network error (ConnectionError), entering retry loop.

    超算使用wandb总是连接超时,设置为offline模式即可 import os import wandb os.environ["WANDB_API_KEY"] = 'KEY' ...

  9. Java面向对象之instanceof和类型转换

    instanceof instanceof(类型转换):利用此关键字可以判断某一个对象是否是指定类的实例 格式: 对象 instanceof 类 返回boolean型 - 如果某个对象是某个类的实例, ...

  10. 页面导出为PDF

    一.使用环境 Vue3.Quasar.Electron 二.安装 jspdf-html2canvas npm install jspdf-html2canvas --save 安装失败可以选择cnpm ...