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

背景

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

赞 (0)

相关推荐

  • 一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很

  • 将Vue组件库更换为按需加载的方法步骤

    本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下: 按需加载DEMO仓库地址 背景 我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大. 组件库依赖在npm上管理,组件库以项目根目录的 index.js 作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法. index.js import Button from "./button"; import Table from "./table"; imp

  • Vue 封装防刷新考试倒计时组件的实现

    本文详细的介绍了防刷新考试倒计时组件 ,分享给大家,也给自己留个笔记,感兴趣的可以了解下 <!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2}}:{{timerCount1}}</p> <button @click="reset">重新计时</button> </div> </temp

  • vue组件系列之TagsInput详解

    简介 TagsInput 是一种可编辑的输入框,通过回车或者分号来分割每个标签,用回退键删除上一个标签.用 vue 来实现还是比较简单的. 先看效果图,下面会一步一步实现他. 注:以下代码需要vue-cli环境才能执行 (一)伪造一个输入框 因为单行的文本框只能展示纯文本,所以图里面的标签实际上都是 html元素,用vue模板来写的话,是这样的: <template> <div class="muli-tags" @click='focus'> <butt

  • vue组件库的在线主题编辑器的实现思路

    一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(CSS文件和字体文件),所以只需要约定一种方式来每次动态请求加载不同的文件就可以了,为了方便这一需求,还配套开发了一个Vessel脚手架的插件,只需要以配置文件的方式列出你需要修改的变量和值,一个命令就可以帮你生成对应的皮

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • 详解vue 组件

    Vue的两大核心 1. 数据驱动 - 数据驱动界面显示 2. 模块化 - 复用公共模块,组件实现模块化提供基础 组件基础 组件渲染过程 template ---> ast(抽象语法树) ---> render ---> VDom(虚拟DOM) ---> 真实的Dom ---> 页面 Vue组件需要编译,编译过程可能发生在 打包过程 (使用vue文件编写) 运行时(将字符串赋值template字段,挂载到一个元素上并以其 DOM 内部的 HTML 作为模板) 对应的两种方式 r

  • vue模块移动组件的实现示例

    一直都想实现类似于五百丁中简历填写中模块跟随鼠标移动的组件,最近闲来无事,自己琢磨实现了一个差不多的组件. 其中每个模块都是组件调入(项目经验.教育经验.工作经验等),所以这里也用到了动态加载组件方式. 思路:鼠标移入模块,显示相应模块的点击移动按钮,点击A模块移动按钮,此时原先A模块所在的位置上变为拖动到这里绿框模块,同时鼠标下悬浮着A模块,鼠标移动,悬浮的A模块跟随移动,绿框也跟随上下移动. 父组件 1.父组件template中的代码 <div class="component-box

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

    背景 平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { data(){ return { tableTitle:[ { label:'省份', prop:'prop' }, { label:'城市', prop:'prop' }, { label:'汇总', prop:'prop', colconfig:[ { label:'下级', prop:'prop'

  • Vue项目首屏性能优化组件实战指南

    目录 Vue首屏性能优化组件 描述 IntersectionObserver requestIdleCallback 实现 总结 Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考虑IE我们也可以在封装组件的时候为其兜底,本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口. 描

  • Vue.js九个性能优化技巧(值得收藏)

    Vue.js九个性能优化技巧(值得收藏)

    目录 Functional components Child component splitting Local variables Reuse DOM with v-show KeepAlive Deferred features Time slicing Non-reactive data Virtual scrolling 总结 参考资料 这篇文章主要参考了 Vue.js 核心成员Guillaume Chau在 19 年美国的 Vue conf 分享的主题:9 Performance se

  • vue短信验证性能优化如何写入localstorage中

    平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了 为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去loca

  • 前端从浏览器的渲染到性能优化

    前端从浏览器的渲染到性能优化

    问题前瞻 1. 为什么css需要放在头部? 2. js为什么要放在body后面? 3. 图片的加载和渲染会阻塞页面DOM构建吗? 4. dom解析完才出现页面吗? 5. 首屏时间根据什么来判定? 浏览器渲染 1.浏览器渲染图解 浏览器渲染页面主要经历了下面的步骤: 1.处理 HTML 标记并构建 DOM 树. 2.处理 CSS 标记并构建 CSSOM 树. 3.将 DOM 与 CSSOM 合并成一个渲染树. 4.根据渲染树来布局,以计算每个节点的几何信息. 5.将各个节点绘制到屏幕上. 为构建渲

  • Vue 组件渲染详情

    目录 前言 全局组件 Vue.extend 组件渲染流程 总结 前言 Vue中组件分为全局组件和局部组件: 全局组件:通过Vue.component(id,definition)方法进行注册,并且可以在任何组件中被访问 局部组件:在组件内的components属性中定义,只能在组件内访问 下面是一个例子: <div id="app"> {{ name }} <my-button></my-button> <aa></aa> &

  • 解决vue组件渲染没更新数据问题

    目录 问题: 现象: 原因 解决步骤 问题: 使用前端日期控件时 - 数据联动时数据绑定无效问题 现象: 选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日期时,B日期数据虽已改变,但是页面数据未改变 例如我要点击留样日期,销毁日期就得默认设置为留样日期之后的三个月,只有第一次点击,效果能正常显示,但是第二次点击,销毁日期就不会更新了… 原因 前端组件没有重新加载,一直保持旧数据 解决步骤 使用标志位让组件每次更改刷新一次 一.前端组件绑定点击事件 二.新增一

  • 分享12个Vue开发中的性能优化小技巧(实用!)

    分享12个Vue开发中的性能优化小技巧(实用!)

    目录 前言 1.长列表性能优化 1.不做响应式 2.虚拟滚动 2.v-for遍历避免同时使用v-if 3.列表使用唯一key 4.使用v-show复用DOM 5.无状态的组件用函数式组件 6.子组件分割 7.变量本地化 8.第三方插件按需引入 9.路由懒加载 10.keep-alive缓存页面 11.事件的销毁 12.图片懒加载 总结 前言 性能优化,是每一个开发者都会遇到的问题,特别是现在越来越重视体验,以及竞争越来越激烈的环境下,对于我们开发者来说,只完成迭代,把功能做好是远远不够的,最重要

  • Vue组件的渲染流程详细讲解

    目录 引言与例子 举一个工作中能用到的例子: 实现 extend 执行流程 1. 注册流程(以Vue.component()祖册为例子): 2. 执行流程 3. 渲染流程 总结 注: 本文目的是通过源码方向来讲component组件的渲染流程 引言与例子 在我们创建Vue实例时,是通过new Vue.this._init(options)方法来进行初始化,然后再执行$mount等,那么在组件渲染时,可不可以让组件使用同一套逻辑去处理呢? 答:当然是可以的,需要使用到Vue.extend方法来实现

  • Cookbook组件形式：优化 Vue 组件的运行时性能

    Vue 2.0 在发布之初,就以其优秀的运行时性能著称,你可以通过这个第三方 benchmark来对比其他框架的性能.Vue 使用了 Virtual DOM 来进行视图渲染,当数据变化时,Vue 会对比前后两棵组件树,只将必要的更新同步到视图上. Vue 帮我们做了很多,但对于一些复杂场景,特别是大量的数据渲染,我们应当时刻关注应用的运行时性能. 本文仿照Vue Cookbook组织形式,对优化 Vue 组件的运行时性能进行阐述. 基本的示例 在下面的示例中,我们开发了一个树形控件,支持基本的树

随机推荐