加速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 相关文章推荐
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
javascript数组排序汇总
2015/07/07 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python做反被爬保护的方法
2019/07/01 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python 爬虫的原理
2020/07/30 Python
怎么写好自荐书
2014/03/02 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
质量安全标语
2014/06/07 职场文书
团日活动总结模板
2014/06/25 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
教师见习总结范文
2015/06/23 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server