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的过程中了解到一种需求的不同解决办法。

热门文章

暂无图片
编程学习 ·

大数据运维-监控可视化需求构建总结

1 数据源需求1.1 主动接入需求来源:某些市场银行1.1.1 API 接入能力要求 支持请求授权接入。(auth 认证)支持数据快速获取测试验证。支持数据依赖的参数引用。支持全量、增量同步(日、时、分、秒)支持多层级解析 (目前按JSON格式处理) 1.1.2 SDK接入能力要求 支持快速集…
暂无图片
编程学习 ·

百天打卡计划第四天-Thread之类的加载过程

类的加载过程 类的加载过程一般分为三个大阶段,加载阶段、连接阶段、初始化阶段。 1加载阶段:主要是负责查找并加载类的二进制数据文件,其实就是class文件。 2连接阶段:连接阶段的工作主要分为三个阶段验证:主要是确保类文件的正确性。 准备:为类的静态变量分配内存,并为…
暂无图片
编程学习 ·

SQL Server—游标(是什么?声明、打开、检索、关闭、释放)

目录游标是什么?如何创建一个游标?操作游标的四个步骤?如何判断游标的提取状态?关闭游标就可以了为什么还要释放呢?他们有什么区别?游标是什么? 是一种数据访问机制,它允许用户单独的操作数据行,而不是对整个行集进行操作。用户可以通过单独处理每一行逐条手机信息并对…
暂无图片
编程学习 ·

vue or h5分享页面 唤起和下载app(苹果和安卓判断 及 微信浏览器和其他浏览器的判断)

题外话: 菜鸡是没有发言权的,导致即使不是前端的锅,也把它变成是你的锅。 哎!!!!!!!!!!!!!首先必须感谢我认识的大佬,一直在帮我解决问题(我关注的那个jamesluozhiwei 这位)步入正题: 1 。唤起和下载 用的框架 和 参考文档(重要,弄清原理啥的看这个)…
暂无图片
编程学习 ·

使用go语言寻找最长不含有重复字符的字串,统计数量

go语言Map例题(寻找最长不含有重复字符的字串 )要求 a := abcdabc 那么得出统计说是4,实现下方代码 解题思路lastOccurred[x]不存在,或者无需操作 lastOccurred[x] >= start -> 更新start 更新lastOccurred[x],更新maxLengthfunc lengthOfNonRepeatingSubstr(s strin…
暂无图片
中恒嘉业 ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
cgfy ·

8. 源码分析之ConsumeQueue

源码分析之ConsumeQueue 消息发送时数据在ConsumeQueue的落地 ​ 连续发送5条消息&#xff0c;消息是不定长&#xff0c;首先所有信息先放入 Commitlog中&#xff0c;每一条消息放入Commitlog的时候都需要上锁&#xff0c;确保顺序的写入。 ​ 当Commitlog写成功了之后。数据…
暂无图片
coreui ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
coreui ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快&#xff1f;它有哪些限制&#xff1f; 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库&#xff0c;像vue内置了动画处理、keep-alive等功能&#xff0c;react则需要去找第三方库…
暂无图片
未来博客 ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
未来博客 ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快&#xff1f;它有哪些限制&#xff1f; 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库&#xff0c;像vue内置了动画处理、keep-alive等功能&#xff0c;react则需要去找第三方库…
暂无图片
建站日记 ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快&#xff1f;它有哪些限制&#xff1f; 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库&#xff0c;像vue内置了动画处理、keep-alive等功能&#xff0c;react则需要去找第三方库…
暂无图片
建站日记 ·

STL Practice —— 【map (1)】

Description 给出学生姓名和分数&#xff0c;要求你输入姓名查询分数。 Input 输入包含T组测试数据。 开头是一个正整数T (0<T<10)&#xff0c;为测试数据数量。 对于每组测试数据&#xff0c;第一行是一个正整数N (0<N<100000)。 接下来有N行&#xff0c;每行包…
暂无图片
mfbz ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法&#xff01; 拓扑排序的过程中&#xff0c;由于需要查找所有以某顶点为尾的弧&#xff0c;即找到该顶点的所有出边&#xff0c;故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同&#xff0c;由于要查找入度为0的点…
暂无图片
mfbz ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快&#xff1f;它有哪些限制&#xff1f; 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库&#xff0c;像vue内置了动画处理、keep-alive等功能&#xff0c;react则需要去找第三方库…
暂无图片
珊珊日记 ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法&#xff01; 拓扑排序的过程中&#xff0c;由于需要查找所有以某顶点为尾的弧&#xff0c;即找到该顶点的所有出边&#xff0c;故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同&#xff0c;由于要查找入度为0的点…
暂无图片
珊珊日记 ·

8. 源码分析之ConsumeQueue

源码分析之ConsumeQueue 消息发送时数据在ConsumeQueue的落地 ​ 连续发送5条消息&#xff0c;消息是不定长&#xff0c;首先所有信息先放入 Commitlog中&#xff0c;每一条消息放入Commitlog的时候都需要上锁&#xff0c;确保顺序的写入。 ​ 当Commitlog写成功了之后。数据…