vue前端代码优化-1

也许有人会感觉CR没有什么卵用,只要我代码实现了功能,我完成了开发任务,我就OK了,为啥还要CR??

但是CR真的是有必要的,你不仅可以发现自己代码中的不足之处,待优化点,简洁明了的代码易读别人接手也会很快。

1. 比如在vue项目中只有某一个组件用某一个特别长的常量对象,如果你只是把常量直接放在该组件下的data中,不仅代码不易读,而且会被watch,影响性能,因为常量是不变的,不用被watch。这个时候Object.freeze()就起作用了,估计很多人都没用过这个特性,先来了解一下:

Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。 如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。对于纯展示的大数据,可以使用Object.freeze提升性能。

  • 优化代码前:可读性差;直接放到data中,会被watch,实际上并不需要被watch
<script>
export default {
  data() {
    tableData: {
      test1: '测试测试1测试1测试1测试1测试1测试11',
      test2: '测试测试2测试2测试2测试2测试2测试22',
      test3: '测试测试3测试3测试3测试3测试3测试33',
      test4: '测试测试4测试4测试4测试4测试4测试44',
      test5: '测试测试5测试5测试5测试5测试5测试55',
      test6: '测试测试6测试6测试6测试6测试6测试66',
      test7: '测试测试7测试7测试7测试7测试7测试77',
      test8: '测试测试8测试8测试8测试8测试8测试88',
      test9: '测试测试9测试9测试9测试9测试9测试99',
      test10: '测试测试10测试10测试10测试10测试10测试1010'
    }
  }
}
</script>
  • 优化代码后:vue不会对tableData里的object做getter、setter绑定,提升性能
<script>
// 如果是多个文件都用到这个,放在constant.js文件中
const TABLEDATA = {
  test1: '测试测试1测试1测试1测试1测试1测试11',
  test2: '测试测试2测试2测试2测试2测试2测试22',
  test3: '测试测试3测试3测试3测试3测试3测试33',
  test4: '测试测试4测试4测试4测试4测试4测试44',
  test5: '测试测试5测试5测试5测试5测试5测试55',
  test6: '测试测试6测试6测试6测试6测试6测试66',
  test7: '测试测试7测试7测试7测试7测试7测试77',
  test8: '测试测试8测试8测试8测试8测试8测试88',
  test9: '测试测试9测试9测试9测试9测试9测试99',
  test10: '测试测试10测试10测试10测试10测试10测试1010'
};

export default {
  data() {
    tableData: Object.freeze(TABLEDATA)
  }
}
</script>

2. 想知道某一个对象数组中是否有符合要求的属性值,some()方法了解一下。

some() 方法用于检测数组中的元素是否满足指定条件

想知道对象数组中的是否有属性isEdit为true的数据

优化代码前:

export default {
  methods() {
    validateTable(arr) {
        let flag = false;
        if (arr.filter(item => item.isEdit).length) {
            flag = true;
        }
        return flag;
    }
  }
}

优化代码后:代码简洁明了

export default {
  methods() {
    validateTable(arr) {
      return arr.some(item => item.isEdit);
    }
  }
}

3. 有时候需要连续初始化vuex好几个平级的属性值,可能某一个方法要调用好几次,代码虽然容易理解,这个时候如果通过配置数据遍历传参更新相应数据会更好,简洁易读,便于之后的代码维护

优化代码前:

export default {
  methods() {
    ...mapAtions([
      'updateState'
    ]),
    initState() {
      this.updateState('state1', false);
      this.updateState('state2', false);
      this.updateState('state3', false);
    },

    checkState(state) {
      if (state === 'state1') {
        this.updateState('state1', true);
      } else if (state === 'state2') {
        this.updateState('state2', true);
      } else if (state === 'state3') {
        this.updateState('state3', true);
      }
    }
  }
}

优化代码后:通过配置数据遍历处理数据是不是更加简洁明了了

const STATE_MAPPING = {
  state1: 'state1',
  state2: 'state2',
  state3: 'state3'
};

export default {
  methods() {
    ...mapAtions([
      'updateState'
    ]),
    initState() {
      Object.keys(STATE_MAPPING).forEach(key => this.updateState(STATE_MAPPING[key], false));
    },
    checkState(state) {
      this.updateState(STATE_MAPPING[state], true);
    }
  }
}

优化后的代码是不是很简洁明了,通过CR你会发现自己代码的不足之处,也会在CR的过程中了解到一种需求的不同解决办法。

热门文章

暂无图片
编程学习 ·

SpringBoot解决跨域

第一种:书写解决跨域的类public class AccessControlAllowOriginFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) …
暂无图片
编程学习 ·

《伸手系列》之分布式锁Redssion入门和源码解析

Redisson简介 Javaer都知道Jedis,Jedis是Redis的Java实现的客户端,其API提供了比较全面的Redis命令的支持。Redission也是Redis的客户端,相比于Jedis功能简单。Jedis简单使用阻塞的I/O和redis交互,Redission通过Netty支持非阻塞I/O。Jedis最新版本2.9.0是2016年的快3年了没…
暂无图片
编程学习 ·

电商新手做亚马逊要怎样开始?

"说到互联网创业,很多人的第一个想到的是淘宝,但是很多人并不清楚,经过十几年的发展淘宝已经很难再进入了,利润也是下降到了最低,很多的卖家都在寻找机会做转型,而你一个毫无经验的小白现在进入,基本可以说很难生存,近年来,我国的跨境电子商务进入迅猛的发展阶段,…
暂无图片
编程学习 ·

文本生成评价指标的进化与推翻

文章目录前言基于词重叠率的方法机器翻译 & 摘要 常用指标BLEUROUGENISTMETEORTERdata to text 常用指标relation generation (RG)content selection (CS)content ordering (CO)如何实现上述的评价指标CoverageDistinctimage caption 常用指标CIDEr好处SPICE词向量评价指标…
暂无图片
编程学习 ·

Node.Js+React.Js+Git的基本开发环境配置

1、基本开发环境的配置 主要包括node.Js的基本安装、React的基本安装、GIT的安装以及git可视化工具sourceTree的基本安装。 (1)node.Js的安装 官网搜索node.Js,下载安装包,进行傻瓜式安装(点击下一步就可以)。(2)React的基本安装 首先创建一个项目文件夹, cd 到需要创…
暂无图片
编程学习 ·

当我们谈论算法我们在谈论什么:由疫情核酸检测想到的分治算法(Divide-and-Conquer)

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_159 北京的疫情一波未平一波又起,由此看来,战“疫”将是一场旷日持久的战争,绝不能掉以轻心、轻易言胜。病毒随时都会死灰复燃,以生命为代价换来的经验教训值得我们每一个人久久深思。笔者所在的小区也开始组织居民批量进…
暂无图片
编程学习 ·

select 进阶查询,不会你就 OUT 了

1.1 分组查询 1.1.1 语法 # where 和 having 可以省略 SELECT col_name, group_function, FROM tb_name [WHERE where_condition] GROUP BY group_expression [HAVING group_condition];☞ 说明col_name:列明 tb_name:表名 where_condition:where 后的过滤条件 group_func…
暂无图片
编程学习 ·

JDK的安装与配置

搭建java开发环境 java语言执行需要经过编译原代码,之后才可以在JVM上解释字节码车光绪,这些需要JDK的支持才能完成 开发者可以直接通过Oracle官方网站获取JDK工具。选择与自己操作系统对应版本,初学者版本不必过新。 下载完之后获得一个程序安装包,双击运行即可。 例如将J…
暂无图片
编程学习 ·

近三位数增长,苏宁银行金融科技之花结出普惠金融之果

文|曾响铃来源|科技向令说(xiangling0815)美联储无限QE,2020年中国不设GDP目标,2万亿直达基层扶危纾困……国内疫情已经基本控制,经济基本面迎来全面复苏阶段,作为市场中最活跃的存在之一,小微企业在复苏过程中,面临的融资难等问题也被热议。在中国有一群喊着帮助小微企…
暂无图片
编程学习 ·

硕彦博创李飞授——Linux权限、掩码、编译

1、文件的权限 - rw- rw- -w- a.txt 类型 创建者 群组 其他人常用类型有:文件(-),文件夹(d),链接文件(l)等文件的权限:文件允许用户操作的一个权限文件对于用户的分类:创建者(u)群组(g)其他人(o)所有用户(a)文件的权限:r (read)读 …
暂无图片
编程学习 ·

UE4学习-添加机关并添加代码控制

文章目录添加机关代码编写给密室添加屋顶打印日志控制系统角色创建一个新游戏模式替换DefaultPawn添加抓取组件获取起点和终点物体拾取,碰撞属性设置今日完整代码 添加机关 首先向场景里面添加一个聚光源添加聚光源以后,可以对其属性进行修改,如图:然后需要给聚光源添加一个…
暂无图片
编程学习 ·

Git 提示fatal: remote origin already exists 错误解决办法

今天使用git 添加远程github仓库的时候提示错误:fatal: remote origin already exists. 意思是origin已经存在,确实,之前我失败一次就放弃了。最后找到解决办法如下: 1、先删除远程 Git 仓库 $ git remote rm origin 2、再添加远程 Git 仓库 $ git remote add origin https…
暂无图片
编程学习 ·

HTTP Header (请求头&响应头)

1. 关于HTTP消息头HTTP消息头是在,客户端请求(Request)或服务器响应(Response)时传递的,位请求或响应的第一行,HTTP消息体(请求或响应的内容)是其后传输。HTTP消息头,以明文的字符串格式传送,是以冒号分隔的键/值对,如:Accept-Charset: utf-8,每一个消息头最后以…
暂无图片
编程学习 ·

客户的老板叫我教她怎么做报表

客户的老板昨天说要修改下送货单格式,我说要收费。她不高兴,说改下就收钱?让我教她怎么做那个送货单。我说可以啊,不知道你能否学会,我们是用Crystal Reports,教你学是要收学费的,还要学其它知识。学费估计要几万哦。算下估计不法算,还是让我们改吧。
暂无图片
编程学习 ·

1254 统计封闭岛屿的数目(dfs)

1. 问题描述:有一个二维矩阵 grid ,每个位置要么是陆地(记号为 0 )要么是水域(记号为 1 )。我们从一块陆地出发,每次可以往上下左右 4 个方向相邻区域走,能走到的所有陆地区域,我们将其称为一座「岛屿」。如果一座岛屿 完全 由水域包围,即陆地边缘上下左右所有相邻区…
暂无图片
编程学习 ·

【Web】Maven搭建前后端连接实例

【Web】Maven搭建前后端连接实例前言建立Maven项目项目目录正式开始配置pom.xml配置db.properties文件applicationContext.xmlspring-mvc.xmlmapper下的UserMapper.xmlbean下的User.javadao层UserDaoservice层UserServiceImpl下的UserServiceImplcontroller层UserControllerWEB…
暂无图片
编程学习 ·

springMVC拦截器

1.编写拦截器类,继承HandlerInterceptorAdapter类,重写preHandle(),afterCompletion()方法,并加入到Spring容器中 @Component public class LoginInterceptor extends HandlerInterceptorAdapter {private static final ThreadLocal<UserInfo> THREAD_LOCAL = new Th…