加速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通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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
去除php注释和去除空格函数分享
2014/03/13 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
JS backgroundImage控制
2009/05/19 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
JavaScript简介
2015/02/15 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jstree的简单实例
2016/12/01 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
微信小程序tabbar底部导航
2018/11/05 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
在Python中表示一个对象的方法
2019/06/25 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
幸福终点站观后感
2015/06/04 职场文书
海洋天堂观后感
2015/06/05 职场文书
与死神共舞观后感
2015/06/15 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
PHP中->和=>的意思
2021/03/31 PHP
防止web项目中的SQL注入
2021/12/06 MySQL