号外号外, 使用 vue 的最佳规范 !!!

导语

开发中 , 良好的项目风格规范, 不只能对项目起到优化的做用, 还能让咱们更快的读懂项目.

为列表渲染设置属性 key

key 这个特殊属性主要用在Vue 的虚拟DOM算法中,在对比新旧虚拟节点时 辨识虚拟节点. 若是在查找的过程当中设置了属性key, 那么查找速度会快不少. 强烈建议在使用 v-for 是提供key. 毕竟不加会输出警告.

<div v-for="item in items" :key="item.id" >
        <!--内容-->
    <div/>
复制代码

在v-if/v-if-else/v-else 中使用key

若是一组v-if+v-else的元素类型相同,最好使用属性key(好比两个

元素) 若是添加了属性key,那么在对比虚拟DOM时,则会认为它们是两个同的节点,因而会将旧元素移除并在相同的位置添加一个新元素,从而避免意料以外的反作用.

<div
    v-if="error"
    key="search-status"
  ></div>

  <div
    v-else
    key="search-status"
  ></div> 
    
复制代码

路由切换组件不变

在使用vue 开发中,最常碰到的一个问题就是,当页面切换到同一个路由可是不一样参数的地址时,组件的生命钩子不会触发

由于vue-router 会识别两个路由使用的是一个组件从而进行复用,并不会从新建立组件,所以组件的生命周期钩子也不会触发.

方案一 :路由导航守卫

可使用路由提供的beforeRouteUpdate守卫触发,只须要将须要执行的逻辑放到守卫中便可. 如在守卫中发送请求,更新状态并从新渲染页面.

方案二 : 观察$route对象的变化

经过watch 能够监听到路由对象的变化,从而对路由变化作出响应

const User = {
    template:'...',
    watch:{
      $router(to,form){
        //作出的反应
      }
    }
}

复制代码

方案三 : 为router-view 组件添加属性key

经过给router-view组件设置key,可使每次切换路由时key都不同,让虚拟DOM认为router-view组件是一个新节点,从而销毁组件建立新组件 缺点是浪费性能

<router-view  :key="router.fullpath"></router-view>
复制代码

避免v-if 和v-for 一块儿使用

当处理指令时,v-for比v-if具备更高的优先级,因此即便咱们只渲染出列表中的一小部分,也得在每次重渲染的时候遍历整个列表;

方案一: 使用计算属性过滤

<div v-for="item in activeUser" :key="item.id" >
    <!--内容-->
<div/>

computed:{
  activeUser:function(){
    return this.users.filter(user=>{
      return user.isActive
    })
  }
}
复制代码

方案二: 循环外层使用 v-if

<div v-if="status">
    <div v-for="item in items"></div>
</div>
复制代码

为组件样式设置做用域

经过scoped 特性来设置组件样式做用域

<style scpoed>

//样式代码 只在当前组件内生效
</style>
复制代码

避免在scoped中使用 元素选择器

大量的元素选择器好比(button[data-v-fsdfae4]) 会比类和特性组合的选择器慢

单文件组如何命名

一个良好的命名规范可以在绝大多数中改善可读性和开发体验

方案一 : 单文件组件的文件的大小写

单文件组建的文件名始终是首字母大写(PascalCase),或始终是横线连接(kebab-case)

components
    => my-components.vue
    => MyComponents.vue
复制代码

方案二 : 基础组件名

应用特定样式和约定的组件(展现类,无逻辑无状态的组件)应该所有以一个特定的前缀开头,比附Base,App或V 优势以下

• 当以私募顺序排列时,应用的基础组件会所有列在一块儿,容易识别
• 由于是多个单词,能够避免包裹简单的组件时随意选择前缀(好比Mybutton,VueButton)

components
=>BaseButton.vue
=>BaseIcon.vue
=>BaseSearch.vue

复制代码

方案三: 单例组件名

只拥有单个活跃实例的组件以The前缀命名,以示其惟一性,但这并觉得这组件只可只用于一个单页面,而是每一个页面只用一次,这些组件永远不接受任何prop,由于他们是为你的应用定制的,而不是应用的上下文,

components
=>TheHeading.vue
=>TheSidebar.vue
复制代码

方案四: 紧密耦合的组件名

以父组件紧密耦合的子组件应该以父组件做为前缀命名

components
=>TodoList.vue
=>TodoListItem.vue
=>TodoLiisItemButton
复制代码

方案五: 组件名中的单词顺序

组件名应该以更高级别的(一般是通常化的描述) 单词开头,以描述新的修饰符结尾

compenents
=>SearchButtonClear.vue
=>SearchButtonRun.vue
=>SearchInputQuery.vue
复制代码

方案六 : 完整单词的组件名

组件名应该倾向于完整单词而不是缩写.

components
=>UserProfileOptions.vue
复制代码

####方案七 : 组件为多个单词

组件名应该始终有多个单词组成,根组件App除外.这样作能够避免与现有的以及将来的HTML 冲突.

Vue.component('todo-item',{
    
    })
复制代码

方案八: 模板中的组件名大小写

单文件组件和字符串模板的组件名应该老是单词首字母大写 可是在DOM模板中老是横线链接的

<my-component></my-component>
<MyComponent></MyComponent>
复制代码

方案九: 自闭合组件

在单文件组件,字符串模板和JSX中没有内容的组件应该是自闭合的,可是在DOM模板中永远不要这样作

<!--在单文件组件,字符串模板,JSX中-->
<MyComponent />

<!--在DOM模板中-->
<my-component></my-component>

复制代码

prop名的大小写

在声明prop的时候,其命名应该始终使用驼峰式命名规则,而在JSX中应该使用使用横线链接的方式

props:{
        gettingText:String
    }
    
    < MyComponent getting-text="haha"> </MyComponent>
复制代码

多个特性元素

多个特性元素应该分多行撰写,每一个特性一行. 方便易读

< MyComponent
    foo="1"
    bar="2"
    seo="3"> 
 
 </MyComponent>
复制代码

模板中的地简单表达式

模板中应该只包含简单的表达式,复杂的表达式应该重构为计算属性或方法

{{normaliFullName}}

computed:{
  normaliFullName:function(){
    return this.fullName.map(name=>{
      return name[0].toUpperCase() + name.slice(1)
    }).join(' ')
  }
}
复制代码

简单的计算属性

应该把复杂的计算属性分割为尽量更多跟简单的属性.

computed:{
  basePrice:function(){
    return this.manufacureCost / ( 1- this.profitMargin)
  },
  discount:function(){
    return this.manufacureCost * ( this.discountPercent || 0)
  }
}
复制代码

指令缩写

指令缩写(用:表示v-bind: , @表示v-on: )保持统一

<input type="text" 
    v-bind:value="name"
    v-on:focus="onFocus"
  />

  <input type="text" 
    :value="name"
    @focus="onFocus"
  />
复制代码

参考文章

《深刻浅出ｖｕｅ．ｊｓ》