vue渲染大量数据如何优化_加速vue组件渲染之性能优化
背景
平时在用vue开发后台管理系统的时候，应该会用到大量的table这种组件，正常这种组件我们会在项目里做二次封装，然后针对表头title做参数化配置，如下：
export default {
data(){
return {
tableTitle:[
{
label:'省份',
prop:'prop'
},
{
label:'城市',
prop:'prop'
},
{
label:'汇总',
prop:'prop',
colconfig:[
{
label:'下级',
prop:'prop'
}
]
}
...
]
}
}
}
此时如果table字段比较多而且是多表头这种的话，数据结构就比较复杂，如果直接写在data里面的话，会在组件初始化时候，对此对象进行递归重写get set属性，源码如下：
function defineReactive(obj,key,val) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
//如果对象被冻结，则直接跳出，不重写 get set方法
if (property && property.configurable === false) {
return
}
//observe会递归调用defineReactive，去重写对象内层的get set属性
var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
},
set: function reactiveSetter (newVal) {
}
});
}
然而这种静态数据是不需要动态响应的，这样势必会造浪性能浪费，于是我们想办法避免这种不必要的性能浪费。
方案1
此时我们可以用Object.freeze()这个方法对此数据进行冻结，vue组件在对data里的属性拦截时，会判断出被冻结的对象是不可被修改的【如上代码注释】，会直接跳过 get set的操作，这样便可以降低vue组件的render时间，提升页面性能
export default {
data(){
return {
tableTitle:Object.freeze(objConfig)
}
}
}
方案2
把我们不需要动态响应的数据，在created的生命周期里面去定义，这样vue底层就不会拦截到这个属性了
export default {
created(){
this.tableTitle = [xxxxx]
}
}
总结
其实这种场景在开发中经常遇到，比如查询条件有很多selectlist字段，我们也可以把它封装到一个大json里面，然后对其进行避免重写属性，可以降低不少性能开销
到此这篇关于加速vue组件渲染之性能优化的文章就介绍到这了,更多相关vue组件渲染性能优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
vue渲染大量数据如何优化_加速vue组件渲染之性能优化相关推荐
- 宝塔mysql优化_宝塔面板下实现MySQL性能优化处理
在PHP+MYSQL架构网站运行过程中,往往会遇到各种性能问题影响,如MySQL.PHP.CPU.磁盘IO.缓存等,其中MySQL瓶颈就是最常见也最难解决的一种影响网站性能的因素:通常,我们会使用re ...
- get vue 和set 用法_深入剖析Vue源码 - 数据代理，关联子父组件
简单回顾一下这个系列的前两节,前两节花了大篇幅讲了vue在初始化时进行的选项合并.选项配置是vue实例化的第一步,针对不同类型的选项,vue提供的丰富选项配置策略以保证用户可以使用不同丰富的配置选项. ...
- Web-big、html、css、JavaScript、vue、webpack、git、微信小程序、uni-app、性能优化、兼容性、网络请求、web安全、其他
文章目录 01.HTML基础 1.行内元素有哪些?行内块元素有哪些?块级元素有哪些? 空(void)元素有哪些? 2.页面导入样式时,使用link和@import有什么区别? 3.title与h1的区 ...
- pythonweb接口优化_记一次 Python Web 接口优化
优质文章,第一时间送达! 作者:Lin_R 出处:SegmentFault 背景 我们负责的一个业务平台,有次在发现设置页面的加载特别特别地慢,简直就是令人发指 让用户等待 36s 肯定是不可能的,于 ...
- vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
- 使用js在桌面上写一个倒计时器_论一个倒计时器的性能优化之路
原文发表于 2018.05.25,搬运自个人博客. 引子 回顾这半年,扛需求能力越来越强,业务代码也是越写越多.但稍一认真看看这些当时为了满足快速上线所码的东西,问题其实还是不少.这次就从一个简单的计 ...
- 微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
- webview加载的页面和浏览器渲染的页面不一致_QQ音乐Android客户端Web页面通用性能优化实践...
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
- kali2020进入单模式_蚂蚁集团技术专家山丘：性能优化的常见模式及趋势
陈显铭(山丘) 读完需要 6分钟 速读仅需 2 分钟 陈显铭,花名山丘,就职于蚂蚁集团,对分布式应用架构.服务化.性能优化等有深入的理解.参与支付宝支付链路核心系统,设计.调优应用系统关键能力, 高效 ...
最新文章
- java 高效批量插入 sqlserver 数据库
- python调用其它文件函数或类
- Atitit. 包厢记时系统 的说明，教程，维护，故障排查手册v2 pb25.doc
- JavaScript语法之语句、字面量、变量
- 吴昊品游戏核心算法 Round 17 —— M*N PUZZLE 与 N PUZZLE 的解的唯一性定理（由特殊到一般）...
- crm高速开发之OrganizationService
- Silvaco 学习笔记——循环：sweep
- Aleax工具条是不是会狂耗内存？
- 路由器实验要求之配置实验、直连路由验证、静态路由
- 分分钟拥有哈利波特的隐身衣，还是在手机端的那种
- C#基础视频教程5.2 如何编写简单的超级热键
- 开关控制灯实验C语言编程,指示灯开关控制器实验.doc
- 抖音算法推荐机制详解！（科普向）
- day17-面向对象作业
- 特征提取 - 海森矩阵（Hessian Matrix）及一个用例（图像增强）
- 微信小程序基于腾讯云对象存储的图片上传
- 我的世界自制mod{0}
- JavaScript核心基础总结笔记
- 网件公司M4100-D12G三层交换机，部分配置说明（2）
- 汽车EMC常用标准汇总