学会VUE的这些编码规范，让你的代码质量更上一层楼它具有三个主要元素：可读性、可维护性和可变性。一个统一了编码标准的团队，可以大大提高开发效率和交互效率，也可以很容易地看懂别人写的代码，让后期维护更容易。今天我们就来说说VUE的编码规范。分为三个等级：必要、强烈推荐、慎用1、必要1.组件名是多个单词，不是一个单词反例Vue.component('todo',{//...})exportdefault{name:'Todo',//...}正例Vue.component('todo-item',{//...})exportdefault{name:'TodoItem',//...}2.组件的数据必须是一个函数。反例exportdefault{data:{name:'dzy'}}正例exportdefault{data(){return{name:'dzy'}}}3.prop的定义尽量详细，至少需要指定类型反例props:['status']正例props:{name:{type:String,default:'dzy',required:true}}4.设置v-for的key值，始终使用keyto匹配v-fornegativeexample
positiveexample
5.永远不要在同一个元素上使用v-if和v-forcounterexample
正例
{{user.name}}6.设置组件样式范围反例正例.button{border:none;border-radius:2px;}7.私有属性名Vue使用_前缀来定义自己的私有属性，所以使用相同的前缀（比如_update）有覆盖实例属性的风险，即使你检查确定了当前版本的Vue没有使用这个属性名，不保证和以后的版本不冲突。对于$前缀，它在Vue生态系统中的目的是向用户暴露一个特殊的实例属性，因此不适合将其用于私有属性。但是，我们建议将这两个前缀组合为$_，作为用户自定义私有属性的约定，以确保它不会与Vue本身冲突。正例varmyGreatMixin={//...methods:{update:function(){//...}}}varmyGreatMixin={//...methods:{_update:function(){//...}}}varmyGreatMixin={//...方法：{$update:function(){//...}}}示例varmyGreatMixin={//...方法：{$_myGreatMixin_update:function(){//...}}}//更好！varmyGreatMixin={//...methods:{publicMethod(){//...myPrivateFunction()}}}functionmyPrivateFunction(){//...}exportdefaultmyGreatMixin2.强烈推荐1.放每个组件成为一个单独的文件反例Vue.component('TodoList',{//...})Vue.component('TodoItem',{//...})正例组件/|-TodoList.vue|-TodoItem.vue2。单个文件的组件名称必须以大写开头或使用“-”连接反例组件/|-mycomponent.vuecomponents/|-mycomponent.vue正组件/|-MyComponent.vuecomponents/|-my-component。vue3.特定样式或基本组件应以相同的公共前缀开头。负组件/|-MyButton.vue|-VueTable.vue|-Icon.vue常规组件/|-BaseButton.vue|-BaseTable.vue|-BaseIcon.vuecomponents/|-AppButton.vue|-AppTable.vue|-AppIcon.vue4。如果一个组件是一个自定义组件，即它不是一个公共组件，那么组件名应该以The开头，表示唯一性，它不应该接收任何props。如果它接收到props，则意味着它是一个公共组件。反例组件/|-Heading.vue|-MySidebar.vue正组件/|-TheHeading.vue|-TheSidebar.vue5.与父组件紧密耦合组件应以父组件的名称为前缀。负组件/|-TodoList.vue|-TodoItem.vue|-TodoButton.vue常规组件/|-TodoList.vue|-TodoListItem.vue|-TodoListItemButton.vue6.组件名称应以高级词开头并以描述性修饰符结尾examplecomponents/|-SearchButtonClear.vue|-SearchButtonRun.vue|-SearchInputQuery.vue|-SearchInputExcludeGlob.vue|-SettingsCheckboxTerms.vue|-SettingsCheckboxLaunchOnStartup.vue7.单文件组件、字符模板和JSX中没有内容的组件应该是self关闭，但永远不要在DOM模板中这样做8.JS/JSX中的组件名应该是驼峰命名的反例Vue.component('myComponent',{//...})importmyComponentfrom'./MyComponent.vue'exportdefault{name:'myComponent',//...}exportdefault{name:'my-component',//...}正例Vue.component('MyComponent',{//...})Vue.component('my-component',{//...})importMyComponentfrom'./MyComponent.vue'exportdefault{name:'MyComponent',//...}9.组件的名字应该是一个完整的英文单词，不是缩写Negativecomponents/|-SdSettings.vue|-UProfOpts.vuePositivecomponents/|-StudentDashboardSettings.vue|-UserProfileOptions.vue```**v10.声明props时，名称应以驼峰命名，在模板和JSX应用程序中应为kebab-case**反例props:{'greeting-text':String}:{greetingText:String}**11.有多个属性的元素要写多行，一个属性一行**反例**12.组件模板应该只包含简单的表达式，复杂的表达式应该重构为计算属性或方法**Counterexample{{fullName.split('').map(function(word){returnword[0].toUpperCase()+word.slice(1)}).join('')}}Positiveexample{{normalizedFullName}}//复杂的表达式已经被移动到一个计算属性中(){returnthis.fullName.split('').map(function(word){returnword[0].toUpperCase()+word.slice(1)}).join('')}}`13.复杂的计算属性应该分成尽可能多的计算属性counterexamplecomputed:{price:function(){varbasePrice=this.manufactureCost/(1-this.profitMargin)return(basePrice-basePrice*(this.discountPercent||0))}}正例计算：{basePrice:function(){returnthis.manufactureCost/(1-this.profitMargin)},discount:function(){returnthis.basePrice*(this.discountPercent||0)},finalPrice:function(){returnthis.basePrice-this.discount}}14.非空ttitudevaluesshouldalwaysbequoted反例正例15。可缩写的指令的建议缩写header>这可能是一个页面标题
这是一些联系信息
欢迎来到我的网站：www.dzyong.top，关注我的公众号【前端小源】，不要错过我的每一个帖子3.谨慎使用1.同组的v-if和v-else最好使用key标识。这是什么意思？，当我们使用v-if和v-else时，它们都是成组出现的。当我们在一个上下文中多次使用v-if和v-else时，很容易造成混淆，很难看出哪个v-else属于那个v-else。添加一个key标识也可以提高更新DOM的效率结果">{{结果}} 2.元素选择器应该避免出现在scopedstyles的scopedstyles中。类选择器优于元素选择器，元素选择器被广泛使用是非常缓慢的。这是因为VUE为了给样式设置作用域，给元素添加了一个unique属性，如下图所示。然后修改选择器，使得元素选择器的元素中，只有具有该属性的元素才会生效，所以使用大量元素+属性组合的选择器比使用类+属性组合的选择器涉及的元素更多。导致变慢。3.父子组件之间的通信应该优先使用prop，而不是使用this$parent或者改变prop4。应该首选VUEX来管理全局状态，而不是this.$root或全局事件总线
