加速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 EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
小程序自定义圆形进度条
Nov 17 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
2006/11/25 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
php数据序列化测试实例详解
2017/08/12 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python3处理HTTP请求的实例
2018/05/10 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
pandas值替换方法
2018/07/10 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
大学生党课思想汇报
2013/12/29 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
人事任命通知书
2015/04/21 职场文书
雾霾停课通知
2015/04/24 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python