Vue精簡版風格指南

前面的話

　　Vue官網的風格指南按照優先級（依次爲必要、強烈推薦、推薦、謹慎使用）分類，且代碼間隔較大，不易查詢。本文按照類型分類，並對部分示例或解釋進行縮減，是Vue風格指南的精簡版

 

組件名稱

【組件名爲多個單詞】（必要）

　　組件名應該始終是多個單詞的，根組件 App 除外。 這樣作能夠避免跟現有的以及將來的 HTML 元素相沖突，由於全部的 HTML 元素名稱都是單個單詞的

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

【單文件組件文件名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終橫線鏈接 (kebab-case)】（強烈推薦）

//bad
mycomponent.vue
//good
MyComponent.vue //good my-component.vue

【基礎組件名要有一個特定前綴開頭】（強烈推薦）

　　應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V

//bad
components/
|- MyButton.vue
|- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue

【只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其惟一性】（強烈推薦）

　　這不意味着組件只可用於一個單頁面，而是每一個頁面只使用一次，這些組件永遠不接受任何 prop

//bad
components/
|- Heading.vue
|- MySidebar.vue //good components/ |- TheHeading.vue |- TheSidebar.vue

【和父組件緊密耦合的子組件應該以父組件名做爲前綴命名】（強烈推薦）

//bad
components/
|- TodoList.vue
|- TodoItem.vue |- TodoButton.vue //good components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue

【組件名應該以高級別的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾】（強烈推薦）

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue //good components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue

【單文件組件和字符串模板中組件名應老是PascalCase——但在DOM模板中老是kebab-case】（強烈推薦）

//bad
<!-- 在單文件組件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【組件名應該傾向於完整單詞而不是縮寫】（強烈推薦）

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

 

組件相關

【單文件組件、字符串模板和JSX中沒有內容的組件應該自閉合——但在DOM模板裏不要這樣作】（強烈推薦）

　　自閉合組件表示它們不只沒有內容，並且刻意沒有內容

//bad
<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【爲組件樣式設置做用域】（必要）

　　這條規則只和單文件組件有關。不必定要使用 scoped 特性。設置做用域也能夠經過 CSS Modules，或者使用其它的庫或約定

//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;} </style> //good <template><button class="btn btn-close">X</button></template> <style scoped> .btn-close {background-color: red;} </style> //good <template><button :class="[$style.button, $style.buttonClose]">X</button></template> <style module> .btn-close {background-color: red;} </style>

【單文件組件應該老是讓 <script>、<template> 和 <style> 標籤的順序保持一致】（推薦）

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

【一個文件中只有一個組件】（強烈推薦）

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {}) //good components/ |- TodoList.vue |- TodoItem.vue

【組件選項默認順序】（推薦）

　　一、反作用 (觸發組件外的影響)

el

　　二、全局感知 (要求組件之外的知識)

name
parent

　　三、組件類型 (更改組件的類型)

functional

　　四、模板修改器 (改變模板的編譯方式)

delimiters
comments

　　五、模板依賴 (模板內使用的資源)

components
directives
filters

　　六、組合 (向選項裏合併屬性)

extends
mixins

　　七、接口 (組件的接口)

inheritAttrs
model
props/propsData

　　八、本地狀態 (本地的響應式屬性)

data
computed

　　九、事件 (經過響應式事件觸發的回調)

watch
生命週期鉤子 (按照它們被調用的順序)

　　十、非響應式的屬性 (不依賴響應系統的實例屬性)

methods

　　十一、渲染 (組件輸出的聲明式描述)

template/render
renderError

 

prop

【Prop 定義應該儘可能詳細】（必要）

　　細緻的 prop 定義有兩個好處： 一、它們寫明瞭組件的 API，因此很容易看懂組件的用法； 二、在開發環境下，若是向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源

//bad
props: ['status']
//good
props: {
  status: String
}
//better
props: {
  status: {
    type: String,
    required: true
  }
}

【聲明prop時，其命名應始終使用camelCase，而在模板和JSX中應始終使用kebab-case】（強烈推薦）

//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {greetingText: String} <WelcomeMessage greeting-text="hi"/>

 

指令及特性

【老是用 key 配合 v-for】（必要）

//bad
  <li v-for="todo in todos">
//good
  <li v-for="todo in todos":key="todo.id">

【不要把 v-if 和 v-for 同時用在同一個元素上】（必要）

//bad
<li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} <li>
//good
<li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} <li>

【多個特性的元素應該分多行撰寫，每一個特性一行】（強烈推薦）

//bad
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
//good
<img
  src="https://vuejs.org/images/logo.png" alt="Vue Logo" >

【元素特性默認順序】（推薦）

　　一、定義 (提供組件的選項)

is

　　二、列表渲染 (建立多個變化的相同元素)

v-for

　　三、條件渲染 (元素是否渲染/顯示)

v-if
v-else-if v-else v-show v-cloak

　　四、渲染方式 (改變元素的渲染方式)

v-pre
v-once

　　五、全局感知 (須要超越組件的知識)

id

　　六、惟一的特性 (須要惟一值的特性)

ref
key
slot

　　七、雙向綁定 (把綁定和事件結合起來)

v-model

　　八、其它特性 (全部普通的綁定或未綁定的特性)

　　九、事件 (組件事件監聽器)

v-on

　　十、內容 (複寫元素的內容)

v-html
v-text

 

屬性

【私有屬性名】（必要）

　　在插件、混入等擴展中始終爲自定義的私有屬性使用 $_ 前綴，並附帶一個命名空間以迴避和其它做者的衝突 (好比 $_yourPluginName_)

//bad
  methods: {update: function () { }}
//bad
  methods: {_update: function () { } }
//bad
  methods: {$update: function () { }}
//bad
  methods: {$_update: function () { }}
//good
  methods: { $_myGreatMixin_update: function () { }}

【組件的data必須是一個函數】（必要）

　　當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數

//bad
Vue.component('some-comp', {
  data: {
    foo: 'bar' } }) //good Vue.component('some-comp', { data: function () { return { foo: 'bar' } } })

【組件模板應該只包含簡單的表達式，複雜的表達式則應該重構爲計算屬性或方法】（強烈推薦）

//bad
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
//good
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

【應該把複雜計算屬性分割爲儘量多的更簡單的屬性】（強烈推薦）

//bad
computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}
//good
computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

【當組件開始以爲密集或難以閱讀時，在多個屬性之間添加空行可讓其變得容易】（推薦）

//good
props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  }
}

 

謹慎使用

　　一、元素選擇器應該避免在 scoped 中出現

　　在 scoped 樣式中，類選擇器比元素選擇器更好，由於大量使用元素選擇器是很慢的

//bad
<style scoped>
button {
  background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
  background-color: red;
}
</style>

　　二、應該優先經過 prop 和事件進行父子組件之間的通訊，而不是 this.$parent 或改變 prop

　　三、應該優先經過 Vuex 管理全局狀態，而不是經過 this.$root 或一個全局事件總線

　　四、若是一組 v-if + v-else 的元素類型相同，最好使用 key (好比兩個 <div> 元素)

//bad
<div v-if="error">
  錯誤：{{ error }}
</div>
<div v-else>
  {{ results }}
</div>
//good
<div
  v-if="error"
  key="search-status"
>
  錯誤：{{ error }}
</div>
<div 
  v-else 
  key="search-results"
>
  {{ results }}
</div>