號外號外, 使用 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"
  />
複製代碼

參考文章

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