前言： 在我的编程世界里，一直强调可维护性和健壮性，其次才是性能，不够优秀，不敢说对代码有洁癖。 试想，前者成立，性能是否也会有所提升呢！本文中，研究如何让我们的代码更加优雅，清晰明了。 * **Api请求，结果解构方式，并且添加finally** *****  * **通过Object 替换switch** ***** 如下图，`switch`语法很长，对比与对象方式，看着没那么舒服吧  使用obj[xxx]取值，就简洁多了  * **在 Vue业务组件中，多条件组合时，通过计算属性整合** *****  * **在Vue中，多个动态class时，通过计算属性整合** *****  * **取Vuex值时，利用...mapState()** *****  * **ElementUI表单中resetFields()与clearValidate()方法** ***** 我相信很多人在做表单弹窗时，清除数据或者说弹框隐藏，其内容体采用`v-if`的方式，我认为这个方式太粗暴了！！！ 对于追求这点性能的我，**重置表单配合清空校验**的方式，还不错哦 ``` // 前提 this.$refs['ruleForm'] !== undefined 等情况 this.$refs['ruleForm'].resetFields() this.$refs['ruleForm'].clearValidate() ``` * **reduce()替代flat()，flat解决兼容问题** ***** ``` export function flattenDeep(arr = []) { return arr.reduce((acc, val) =>Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []) } ``` * **CodeMetrics插件** ***** vscode安装此插件，可以显示基本的复杂度，作为参考将此数值进行差分 | x复杂度数 | 描述 | | --- | --- | | x <= 10 | 简单 | | 10 < x <= 30 | 中等 | | x > 30 | 复杂：建议拆分 | | 如图 |  | * **函数入参数量** ***** 函数参数建议不超过3个，超过建议使用Object，并结构 ``` function createMenu({ title, body, buttonText, cancellable }) { // ... } ``` https://mp.weixin.qq.com/s/P8PEI2GNPgylNrs4qukWww