加速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中常用的55个经典技巧
Aug 12 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
详解React 元素渲染
Jul 07 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水印技术
2007/02/14 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
Vue指令指令大全
2019/02/09 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
升职自荐书范文
2013/11/28 职场文书
个人党性剖析材料
2014/02/03 职场文书
售后求职信范文
2014/03/15 职场文书
教师党员一句话承诺
2014/03/28 职场文书
商务助理求职信范文
2014/04/20 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
优秀员工推荐材料
2014/12/20 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书