号外号外, 使用 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"
  />
复制代码

参考文章

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

帮助中心

导语