之前由于觉着写博客要注意排版 内容 用语,所以一直用的印象笔记。结果就在前几天换了电脑,PC上始终无法同步到之前的笔记,所以想了想还是写博客吧。以后会记一些自己工作中的一些问题和心得,写的有问题的地方也欢迎大家讨论。
养成一个好的工作习惯还是非常重要的,所谓程序猿的不修边幅 指的是衣着打扮,但是对自己的代码一定是要精益求精,日常代码review就是其中一项。废话不多说,开始今天的笔记。
功能需求是酱紫的:有一个表单需要新增几个checkbox和一个input 这个input只有在其中一个checkbox勾选的时候才出现,当然校验这些必不可少了(eleUI),对于这样一个简单的功能,我相信大家和我一样用了几分钟就搞定了
原代码
<el-form-item prop="api_author.value"> <el-checkbox-group v-model="create_source.api_author.value" :min="1" @change="val=>exchangeWithdraw(val)"> <el-checkbox class="col-default" label="1"> <span class="col-default">{{$_lang('交易')}}</span> </el-checkbox> <el-checkbox label="2"> <span class="col-default">{{$_lang('提现')}}</span> </el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item v-show="isWithdraw" prop="ip_address.value" :rules="create_source.ip_address.rule" :label="$_lang('IP地址')"> <el-input v-model="create_source.ip_address.value" :placeholder="$_lang('请输入IP地址')"> </el-input> </el-form-item>
//是否显示IP地址 exchangeWithdraw(val) { val.forEach((elem) => { this.isWithdraw = elem === "2"?true:false; }); },
至于label写 1 2是因为接口返回需要,功能倒是很简单实现了,但是仔细一看,可以优化的地方有好几个,
优化代码
<el-form-item prop="api_author.value"> <el-checkbox-group v-model="create_source.api_author.value" :min="1"> <el-checkbox class="col-default" label="1"> <span class="col-default">{{$_lang('交易')}}</span> </el-checkbox> <el-checkbox label="2"> <span class="col-default">{{$_lang('提现')}}</span> </el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item v-if="allowedWithdraw" prop="ipAddress.value" :rules="create_source.ipAddress.rule" :label="$_lang('IP地址')"> <el-input v-model="create_source.ipAddress.value" :placeholder="$_lang('请输入IP地址')"> </el-input> </el-form-item>
computed: { allowedWithdraw() { return this.create_source.api_author.value.includes('2'); } },
优化点
1.methods改为computed
这俩有什么区别呢,methods方法都不陌生 老实本分 你调用一次就执行一次,即使100次调用的结果一样 依然执行100次。
computed计算属性就不一样了,很心机,只有依赖数据发生变化,他才会进行计算。针对这个场景,显然computed更合适
2.遍历改为includes
Includes() 方法检查是否数组包含某些元素,返回 true 或 false ,我们需要的就是一个状态来判断下面文本框的显示与否,而且代码效率和数量少,明显用Includes更好
3.v-show改为v-if
虽然这个文本框可能会频繁的显示隐藏,但是现在是在表单里面,用v-show只是做了隐藏而已 校验的时候还是会去校验这个字段 完全没有必要