.content/deep/.el-button{height:60px;}规范与每一个团队和个人息息相关，因为它不仅影响代码维护和理解的成本，严重时还会影响成员的开发心情。一个团队的编码规范、git规范等等，并没有绝对最优的方案，你要清楚的明白，没有灵丹妙药。规范是为了统一团队，提高代码可读性，降低代码维护成本。这篇文章是为了记录项目codereview中的一些常用规范，仅供参考JS部分与渲染无关的数据vue中data中的数据默认会进行双向数据绑定。如果直接将大量与渲染无关的数据放在data中，会浪费双向数据绑定所消耗的性能。提取与渲染无关的数据，用Object.freeze处理。表格中的列数据可以单独从外部js文件中提取出来作为配置文件，也可以在当前.vue文件中定义一个常量来定义列数据，因为反正数据是固定的，不会被修改modified应该用Object.freeze包裹，这样可以提高性能和提取固定数据。对于一些下拉框前端的固定数据，也建议进行此操作。constcolumnList=Object.freeze([{title:'Name',key:'name',align:'center'},{title:'gender',key:'gender',align:'center'}])它应该注意，Object.freeze()冻结了Value，此时，你仍然可以替换变量的引用，并且可以使用这种语法来保证数据不会改变。如果要对数据进行修改和交互，不适合使用冻结。模态框控件一个页面上通常会有很多不同功能的弹出框。如果每个弹出框都设置一个对应的变量来控制它的显示，那么变量的个数就会多余，命名也很困难。可以使用一个变量来控制同一页面所有Modal弹框的显示例如某页面有3个Modal弹框//bad//每个数据控制对应的Modal显示和隐藏newVue({data(){return{modal1:false,modal2:false,modal3:false,}}})//good//当modalType为对应的值时，显示对应的弹框newVue({data(){return{modalType:''//modalType值为modal1,modal2,modal3}}})debounce使用如远程搜索需要通过接口动态获取数据，如果每次用户进入都请求接口，就是一个浪费带宽和性能当一个按钮被多次点击时，会引起多次触发事件，可以结合场景执行immediate{{item.label}}import{debounce}from'lodash'methods:{remoteMethod:debounce(function(query){//todo...//这个指向没有问题},200),}图片函数在开发过程中，图片处理往往是一个容易被忽略的环节，同时也会影响到开发效率和页面的性能有一定的关系。压缩处理不同业务场景的图片格式选择。JPG适合呈现色彩鲜艳的图像。JPG图片通常以大背景图片、轮播图片或横幅图片的形式出现，例如Logo、图像或背景，颜色简单，对比度强。透明度等将常用的、变化频率低的小图片合并成一张变化频率比较高的精灵图复杂且小于6KB图片的Base64处理根据项目图片数量、项目用户模型分布等情况，考虑使用webp进行图片处理。路由组件参数传递。在组件中使用$route会与其对应的路由形成高耦合，使得Make组件只能在某些特定的url上使用，限制了其灵活性使用props将组件与路由解耦：用$routeconstUser={template代替耦合:'用户{{$route.params.id}}
'}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User}]})通过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}}]})参考：路由组件传参Vue生命周期在父子组件中，掌握父子组件对应的生命周期钩子加载顺序可以让开发者更适合父组件home
子组件list
加载homebeforeCreate-->homecreated-->homebeforeMount-->listcreated时父子组件的加载顺序-->listbeforeMount-->listmounted父子组件的销毁顺序homebeforeDestroy-->listbeforeDestroy-->listdestroyed-->homedestroyed在实际开发过程中，当子组件的某个生命周期结束时，会通知父组件完成，然后在父组件中做相应的处理emitup//子组件在相应的钩子中发布事件created(){this.$emit('done')}//父组件订阅它的partyand通过@hook发送hook监听子组件的生命周期select优化下拉框遍历，需要注意options标签保持同一行，如果有换行，会造成冗余所选值中的空白{{item.label}}需要让Options和下拉框的值在同一行{{item.label}}datadatahierarchydata数据有数据层次结构，不要过度扁平化或过度嵌套deep，如果过度扁平化会导致数据命名空间、参数传递和处理的冲突。如果嵌套层次太深，在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})})策略模式使用策略模式避免过多的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]}解构、解构、赋值和默认值，当解构数为小于多少，适合直接解构赋默认值，数据是否聚合处理const{naem='',age=10,gender='man'}=res.data//badthis.name=namethis.age=agethis.gender=gender//goodthis.person={naem,age,gender}任何时候责任单一，尽量用一个函数做一件事，而不是各种逻辑耦合在一起提高单个函数的复用性和可读性每个页面都会请求数据，加载完成后显示到页面created(){this.init();}，方法：{//在init函数中聚合所有请求行为//将每个请求单独拆分init(){this.getList1()this.getList2()},getList1(){//todo...},getList2(){//todo...}}v-bindHTML部分html写模板模板，当属性过多时，是否换行实体使用html显示<、>、&等一些字符时，使用字符实体代替>1&<12
>1&<12
CSS局部样式渗透开发中修改第三方组件的样式是很常见的，但是由于样式隔离scoped属性的，可能需要去掉scoped，否则换个样式会带来副作用（组件样式污染，不够优雅），样式渗透只有在css预处理器中使用才会生效。Less使用/deep/.content/deep/.el-button{height:60px;}scss使用::v-deep.content::v-deep.el-button{height:60px;}手写笔使用>>>外层>>>.custon-components{height:60px;}spaceappropriateSpaces可以提高代码的阅读体验，使其更加优雅美观选择器之后，属性value.custom-style{//选择器与{margin:0;//属性值之前的空格transform:scale(1.5,2.2);//逗号后加一个空格}换行，html类型。当一行有很多属性时，适当的换行可以提高阅读和审美。custom-style{//可以在一条语句中定义一个或多个属性.如果太长，则需要水平滚动才能阅读剩余内容。.custom.header.title,.other.header.title{color:#f0f;}嵌套层级浏览器解析css时，从右到左递归匹配。层级嵌套太深不仅影响性能，还会导致样式可读性和代码维护性降低。一般层框控制在5层以内。双引号属性选择器中的值必须用双引号括起来。不允许使用单引号，也不允许使用。引号，html属性值也建议使用双引号，js使用单引号。自定义样式{font-family:"PingFangSC","STHeitiSC-Light";}相同属性顺序规则下的属性要按功能分组，格式化在FormattingModel(layoutmethod,position)>BoxModel(size)>Typographic(text-related)>Visual(visualeffect)写为了提高代码的可读性说明：FormattingModel相关属性包括：position/top/right/bottom/left/float/display/overflow等BoxModel相关属性包括：border/margin/padding/width/Typographicheight等相关属性包括：font/line-height/text-align/word-wrap等视觉相关属性包括：background/color/transition/list-style等。另外，为了增加可读性，如果content属性包含在内，应该放在属性的最前面。
