vue前端代码优化

也许有人会感觉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的过程中了解到一种需求的不同解决办法。