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 分钟陈显铭,花名山丘,就职于蚂蚁集团,对分布式应用架构.服务化.性能优化等有深入的理解.参与支付宝支付链路核心系统,设计.调优应用系统关键能力, 高效 ...

vue渲染大量数据如何优化_加速vue组件渲染之性能优化

vue渲染大量数据如何优化_加速vue组件渲染之性能优化相关推荐

最新文章

热门文章