加速vue组件渲染之性能优化


Posted in Javascript onApril 09, 2020

背景

平时在用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组件渲染性能优化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
javascript实现简单页面倒计时
Mar 02 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 #Javascript
微信小程序纯文本实现@功能
Apr 08 #Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 #Javascript
vue与iframe之间的信息交互的实现
Apr 08 #Javascript
You might like
第二节 对象模型 [2]
2006/10/09 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
PHP小技巧之函数重载
2014/06/02 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JavaScript 事件系统
2010/07/22 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
微信小程序分页加载的实例代码
2017/07/11 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python 的 with 语句详解
2014/06/13 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
广告学专业推荐信范文
2013/11/23 职场文书
四下基层实施方案
2014/03/28 职场文书
党员活动日总结
2014/05/05 职场文书
诉前财产保全担保书
2014/05/20 职场文书
节约用电通知
2015/04/25 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS