关于vue项目的工作笔记日常代码review(一)

之前由于觉着写博客要注意排版内容用语，所以一直用的印象笔记。结果就在前几天换了电脑，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次。

扫描二维码关注公众号，回复： 1784319 查看本文章

computed计算属性就不一样了，很心机，只有依赖数据发生变化，他才会进行计算。针对这个场景，显然computed更合适

2.遍历改为includes

Includes() 方法检查是否数组包含某些元素，返回 true 或 false ，我们需要的就是一个状态来判断下面文本框的显示与否，而且代码效率和数量少，明显用Includes更好

3.v-show改为v-if

虽然这个文本框可能会频繁的显示隐藏，但是现在是在表单里面，用v-show只是做了隐藏而已校验的时候还是会去校验这个字段完全没有必要

关于vue项目的工作笔记 日常代码review(一)

猜你喜欢

关于vue项目的工作笔记日常代码review(一)