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