最近翻了一下我在群里提交的review代码，发现了一些小问题，有的问题不止一次，所以还是记录一下就老老实实A波，免得记性不好算了，怪怪尴尬。我在团队主要负责前端项目，框架是Vue。以下是我们团队在工作中设定的一些代码规范。Vue代码规范规定，如果没有特殊情况，v-bind、v-on、v-text这些缩写指令必须在组件属性之间有空行。事件绑定方式为：handle[description]，例如：handleSubmit，handleButtonClickv-text格式为{{someVar}}，两边带空格必须使用绝对路径引用，以@开头，css文件数量除外时模板格式属性大于等于3，换行编辑的属性顺序建议每一个属性要按照a-z排列，指令属性不强制，比如v-ifv-forv-model绑定属性，比如：label="labelWidth"事件属性，比如@click="handleButtonClick"common属性，如size="small"自闭组件为普通组件删除删除删除component属性顺序组件外部声明componentspropsexports组件内部数据relateddatacomputedmapStateother组件内部生命周期ationshandleAClickhandleBClickhandleBKeyupcustomMethodsvg坐标简化正则replace(\.\d{2})\d+with$1以下是我在写代码时遇到的一些问题，现在整理一下（以后可能会有更多，粗心~~），至少我需要注意的一些小事，让团队协作写出统一漂亮的代码Slot标签注意自闭：，其他标签同理，没有统一自闭模板中的content或者其他子标签里面应该没有逻辑，只是为了展示，放在methods或者computed里面，css有透明度，颜色写成rgba组合//比如，背景：rgba(0,0,0,.8);旧的codeslot最好用v-slot代替：https://cn.vuejs.org/v2/api/#...5.常见错误:==classsingleName,noquotes==6。如果代码逻辑记得提前提取里面的常量。如果在单个文件中使用，只需将其放在文件下即可。如果多处使用，放在外部统一导入。7.记得考虑如何提交代码的健壮性//例如：下面改成>=this.data.noticeDatas.length===this.maxLength8.不要用all来指定属性//all应该更改为transform/scale/opacity和其他特定属性transition:all.3sease；9.代码优化的判断对象returnBooleanvalue中的属性returnthis.paymentInfo&&this.paymentInfo.settlementSheetUrl;//可以优化为returnBoolean(this.paymentInfo?.settlementSheetUrl);或更改为返回!this.paymentInfo?.settlementSheetUrl10。代码写法，将子组件传递给父组件，派发事件使用'-'，不要comelCase//childcomponenthandleChange(v){this.$emit('address-changed',v);},11.当函数参数较多或者或者未知参数时，最好以对象的形式传入//比如当前业务函数，传入四个参数，host可能是一个未知的exportconstisSelfProposal=(sourceId,sourceId,shopAddress,host)=>{如果(!sourceId||!shopAddress)返回false;constshopIds=getEnvByHost(host)==='release'?releaseSelfProposalShopIds:testSelfProposalShopIds;如果(selfProposalSoureIds(indes.sourceId)&&shopIds.includes(shopId)){returntrue;}returnfalse;};//可以改成exportconstisSelfProposal=({sourceId,sourceId,shopAddress,host,})=>{12.子组件可以通过vuex获取的数据，不需要从父组件中取vuex中的数据，通过props传入。13.简化代码的两个建议，如下图https://babeljs.io/docs/en/ba...constobj={foo:{bar:{baz:42,},},};//可以写成如下constbaz=obj?.foo?.bar?.baz;//42https://babeljs.io/docs/en/ba...order(state){//??其次是默认值返回state.order.orderDetailEntities[this.orderId]??{};}，目前，这些将在以后更新
