.content/deep/.el-button{height:60px;}规范与每一个团队和个人息息相关，因为它不仅影响代码维护和理解的成本，严重时还会影响成员的开发心情。一个团队的编码规范、git规范等等，并没有绝对最优的方案，你要清楚的明白，没有灵丹妙药。规范是为了统一团队，提高代码可读性，降低代码维护成本。本文记录项目代码审查中的一些常见规范，仅供参考。一、JS部分1、与渲染无关的数据vue中data中的数据默认会进行双向数据绑定。如果直接将大量与渲染无关的数据放在data中，会浪费双向数据绑定的消耗为了提高性能，将这些与渲染无关的数据提取出来，用Object处理。冻结。表中的列数据可以单独从外部js文件中提取出来作为配置文件，也可以在当前.vue文件中定义一个常量来定义列数据，因为它是固定的，无论如何都不会被修改，并且应该用Object.freeze包裹起来，这样既可以提高性能，又可以提取固定数据。对于一些下拉框前端的固定数据，也推荐使用此操作。constcolumnList=Object.freeze([{title:'name',key:'name',align:'center'},{title:'gender',key:'gender',align:'center'}])需要注意最重要的是Object.freeze()冻结了值。这时候你仍然可以替换变量的引用，并且可以使用这种语法来保证数据不会改变。如果要对数据进行修改和交互，不适合使用freezingup。2、Modal框的控件一个页面上通常会有很多不同功能的弹出框。如果每个弹出框都设置一个对应的变量来控制它的显示，那么变量的个数就会多余，命名也很困难。可以使用A变量来控制同一页面所有Modal弹窗的显示。比如某个页面有3个Modal弹框：//bad//每个数据控制对应的Modal显示和隐藏newVue({data(){return{modal1:false,modal2:false,modal3:false,}}})//good//当modalType为对应的值时，显示对应的弹框newVue({data(){return{modalType:''//modalType值为modal1,modal2,modal3}}})3.debounce比如使用远程搜索时，需要通过接口动态获取数据。如果每次用户输入时都请求该接口，这是对带宽和性能的浪费。当一个按钮被多次点击时，会引发多个触发事件，可以结合场景立即立即执行：{{item.label}}在图片功能的开发过程中，图片处理往往是一个比较容易被忽视的环节，也会在一定程度上影响开发效率和页面性能：（1）图片压缩，除非特别要求图片要高质量显示，否则要进行相应的压缩处理（2）不同图片格式的选择业务场景：JPG适合呈现丰富的色彩JPG图片常以大背景图、轮播图、banner图等形式出现，如Logo、图像或背景，颜色简单，对比强烈，要求透明度。将常用且变化频率低的小图片合并成Sprite图片，用于对变化频繁且小于6KB的图片进行base64处理。根据项目图片数量和项目用户机型分布等情况，考虑使用webp处理图片。路由形成了高度的耦合，使得组件只能在某些特定的URL上使用，限制了其灵活性。使用props解耦组件和路由：（1）用$routeconstUser={template:'User{{$route.params.id}}
'}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User}]})(2)通过props解耦，让你可以在任何地方使用组件，使组件更容易复用和测试。constUser={props:['id'],template:'User{{id}}
'}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User,props:true},//对于包含命名视图的路由，必须分别为每个命名视图添加`props`选项：{path:'/user/:id',components:{default:User,sidebar:Sidebar},props:{default:true,sidebar:false}}]})参考：路由组件参数传递在正确的时间做正确的事父组件home
子组件：list
加载时父子组件的加载顺序：homebeforeCreate-->homecreated-->homebeforeMount->listcreated-->listbeforeMount-->listmounteddestruction父子组件销毁顺序：homebeforeDestroy-->listbeforeDestroy-->listdestroyed-->homedestroyed在实际开发过程中，当一个子组件生命周期结束时，父组件会被通知组件，然后在父组件中做相应的处理emitup：//子组件在对应的钩子中发布事件通过@hook监控子组件的生命周期6.遍历Selectoptimization下拉框时，需要注意options标签要保持在同一行。如果有换行，选中的值会有多余的空格{{item.label}}需要让Options和下拉框的值保持在同一行{{item.label}}7.datadatahierarchydata数据具有数据层次结构，不要过度扁平化或嵌套层级太深，太扁平化会导致数据命名空间冲突，参数传递和处理，如果嵌套层级太深，则在vue数据劫持的时候也会造成递归层次太深，如果嵌套层次太疯狂，小心递归爆栈问题。而且如果层级太深，数据操作和处理不方便，获取数据做容错处理也很麻烦。一般最好保留2-3层。如果只有一层数据，太扁平了{name:'',age:'',gender:''}不方便处理//passajax({this.name,this.age,this.gender})作为接口参数//获取数据的接口，批量处理ajax().then(res=>{const{name,age,gender}=res.datathis.name=namethis.age=agethis.gender=gender})适当的层次结构不仅增加了代码的可维护性和可读性，还可以增加操作和处理的便利性{person:{//personalinformationname:'',age:'',gender:''}}can对person进行操作//作为接口参数通过ajax(this.person)//接口获取数据，批处理ajax().then(res=>{const{name,age,gender}=res.datathis.$set(this,'person',{name,age,gender})})8.策略模式使用策略模式避免了过多的ifelse判断，也可以代替简单的逻辑switchconstformatDemandItemType=(value)=>{switch(value){case1:return'basic'case2:return'Advanced'case3:return'VIP'}}//策略模式constformatDemandItemType2=(value)=>{constobj={1:'Basic',2:'Advanced',3:'VIP',}returnobj[value]}解构、解构、赋值和默认value，当解构次数小于多少时，适合直接解构赋默认值，数据是否与聚合处理相关const{naem='',age=10,gender='man'}=res.data//badthis.name=namethis.age=agethis.gender=gender//goodthis.person={naem,age,gender}9.单个函数应该在任何时候做一件事而不是各种逻辑全部耦合在一起以提高单个功能的可重用性和可读性。每个页面都会请求数据，并在加载完成后显示在页面上。创建（）{this.init（）;}，我thods:{//在init函数中聚合所有请求行为//将每个请求单独拆分init(){this.getList1()this.getList2()},getList1(){//todo...},getList2(){//todo...}}10.v-bind2.HTMLpart1.HTML写法写template模板时，如果属性太多，是否换行2.实体使用html显示<、>、&等一些字符时，使用字符实体代替>1&<12
>1&<12
三、CSS部分1.样式渗透在开发过程中修改第三方组件样式很常见，但是由于scoped属性的样式隔离，可能需要删除范围或创建另一种样式这些做法会带来副作用（组件样式污染，不够优雅），样式渗透只有在css预处理器中使用才会生效。Less使用/deep/.content/deep/.el-button{height:60px;}scss使用::v-deep.content::v-deep.el-button{height:60px;}触控笔使用>>>outer>>.custon-components{height:60px;}outer>>>。自定义组件{height:60px;}2.Space适当的空格可以提升代码的阅读体验，使其更加优雅美观。选择器后，属性值：.custom-style{//selectorand{spacemargin:0;//属性值前transform:scale(1.5,2.2);//逗号后加空格}3.换行而html类型，当一行中有很多属性时，适当的换行可以提高阅读和审美。custom-style{//可以在一条语句中定义一个或多个属性线。如果太长，您需要水平滚动才能阅读其余内容。你应该尽量让阅读顺序垂直。custom.header.title,.other.header.title{color:#f0f;}4。嵌套层浏览器在解析css时，是从右到左递归匹配的。嵌套太深不仅会影响性能，还会降低样式的可读性和代码的可维护性。一般层框控制在5层以内。5.双引号属性选择器中的值必须用双引号括起来。不允许使用单引号，也不允许使用引号。HTML属性值也推荐使用双引号，js使用单引号：.custom-style{font-family:"PingFangSC","STHeitiSC-Light";}6.属性顺序相同规则下的属性，写的时候要按功能分组。并按照FormattingModel（布局方式、位置）>BoxModel（大小）>Typographic（文字相关）>Visual（视觉效果）的顺序编写，提高代码的可读性。说明：FormattingModel相关属性包括：position/top/right/bottom/left/float/display/overflow等。BoxModel相关属性包括：border/margin/padding/width/height等。Typographic相关属性包括：font/line-height视觉相关属性如/text-align/word-wrap包括：background/color/transition/list-style等。另外为了增加可读性，如果包含content属性，应该放在最前面属性。
