本文檔摘自Vue官方的編碼規(guī)范策治，結(jié)合實(shí)際項(xiàng)目給出如下規(guī)范建議

1拐云、組件名為多個(gè)單詞

組件名應(yīng)該始終是多個(gè)單詞的田炭，根組件 App 除外查吊。
這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突谐区，因?yàn)樗械?HTML 元素名稱都是單個(gè)單詞的。
反例

Vue.component('todo', {
  // ...
}) 
export default {
  name: 'Todo',
  // ...
}

好例子

Vue.component('todo-item', {
  // ...
})
export default {
  name: 'TodoItem',
  // ...
}

2逻卖、組件數(shù)據(jù)

組件的 data 必須是一個(gè)函數(shù)宋列。
當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)评也。
反例

Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})
export default {
  data: {
    foo: 'bar'
  }
}

好例子

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

3炼杖、Prop 定義

Prop 定義應(yīng)該盡量詳細(xì)灭返。
在你提交的代碼中，prop 的定義應(yīng)該盡量詳細(xì)坤邪，至少需要指定其類型熙含。
細(xì)致的prop 定義有兩個(gè)好處：
（1）它們寫明了組件的 API，所以很容易看懂組件的用法艇纺；
（2）在開發(fā)環(huán)境下怎静，如果向一個(gè)組件提供格式不正確的 prop，Vue 將會(huì)告警黔衡，以幫助你捕獲潛在的錯(cuò)誤來源蚓聘。
反例

// 這樣做只有開發(fā)原型系統(tǒng)時(shí)可以接受
props: ['status']

好例子

    props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    }

4、為 v-for 設(shè)置鍵值

總是用 key 配合 v-for盟劫。
在組件上總是用 key 配合 v-for夜牡，以便維護(hù)內(nèi)部組件及其子樹的狀態(tài)。
反例

<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

好例子

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

5侣签、避免 v-if 和 v-for 用在一起

永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上氯材。

6、為組件樣式設(shè)置作用域

對(duì)于應(yīng)用來說硝岗，頂級(jí) App 組件和布局組件中的樣式可以是全局的氢哮，但是其它所有組件都應(yīng)該是有作用域的。
對(duì)于組件庫型檀，我們應(yīng)該更傾向于選用基于 class 的策略而不是 scoped 特性。
使用唯一的 class 名可以幫你確保那些三方庫的 CSS 不會(huì)運(yùn)用在你自己的 HTML 上胀溺。

7裂七、私有屬性名

在插件、混入等擴(kuò)展中始終為自定義的私有屬性使用 $_ 前綴仓坞。并附帶一個(gè)命名空間以回避和其它作者的沖突 (比如 $_yourPluginName_)背零。
反例

var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}

好例子

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

8、組件文件

只要有能夠拼接文件的構(gòu)建系統(tǒng)无埃，就把每個(gè)組件單獨(dú)分成文件徙瓶。
當(dāng)你需要編輯一個(gè)組件或查閱一個(gè)組件的用法時(shí)，可以更快速的找到它嫉称。
反例

Vue.component('TodoList', {
  // ...
})
Vue.component('TodoItem', {
  // ...
})

好例子

components/
|- TodoList.js
|- TodoItem.js
components/
|- TodoList.vue
|- TodoItem.vue

9侦镇、單文件組件文件的大小寫

單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)，要么始終是橫線連接 (kebab-case)织阅。
反例

components/
|- mycomponent.vue
components/
|- myComponent.vue

好例子

components/
|- MyComponent.vue
components/
|- my-component.vue

10壳繁、基礎(chǔ)組件名

應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭，比如 Base闹炉、App 或 V蒿赢。

11、單例組件名

只應(yīng)該擁有單個(gè)活躍實(shí)例的組件應(yīng)該以 The 前綴命名渣触，以示其唯一性羡棵。
這不意味著組件只可用于一個(gè)單頁面，而是每個(gè)頁面只使用一次昵观。這些組件永遠(yuǎn)不接受任何 prop晾腔，因?yàn)樗鼈兪菫槟愕膽?yīng)用定制的舌稀，而不是它們?cè)谀愕膽?yīng)用中的上下文啊犬。如果你發(fā)現(xiàn)有必要添加 prop，那就表明這實(shí)際上是一個(gè)可復(fù)用的組件壁查，只是目前在每個(gè)頁面里只使用一次觉至。

12、緊密耦合的組件名

和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名睡腿。
如果一個(gè)組件只在某個(gè)父組件的場景下有意義语御，這層關(guān)系應(yīng)該體現(xiàn)在其名字上。因?yàn)榫庉嬈魍ǔ?huì)按字母順序組織文件席怪，所以這樣做可以把相關(guān)聯(lián)的文件排在一起应闯。
反例

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

好例子

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

13、組件名中的單詞順序

組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開頭挂捻，以描述性的修飾詞結(jié)尾碉纺。
反例

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

好例子

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

14、自閉合組件

在單文件組件刻撒、字符串模板和JSX中沒有內(nèi)容的組件應(yīng)該是自閉合的骨田，但在 DOM 模板里永遠(yuǎn)不要這樣做。
HTML 并不支持自閉合的自定義元素
反例

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

好例子

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

15、模板中的組件名大小寫

對(duì)于絕大多數(shù)項(xiàng)目來說醋火，在單文件組件和字符串模板中組件名應(yīng)該總是 PascalCase 的悠汽，但是在 DOM 模板中總是 kebab-case 的。

16芥驳、JS/JSX 中的組件名大小寫

JS/[JSX中的組件名應(yīng)該始終是 PascalCase 的介粘，盡管在較為簡單的應(yīng)用中只使用 Vue.component 進(jìn)行全局組件注冊(cè)時(shí)，可以使用 kebab-case 字符串晚树。
對(duì)于只通過 Vue.component 定義全局組件的應(yīng)用來說姻采，我們推薦 kebab-case

17、完整單詞的組件名

組件名應(yīng)該傾向于完整單詞而不是縮寫。
編輯器中的自動(dòng)補(bǔ)全已經(jīng)讓書寫長命名的代價(jià)非常之低了慨亲，而其帶來的明確性卻是非常寶貴的婚瓜。不常用的縮寫尤其應(yīng)該避免。

18刑棵、Prop 名大小寫

在聲明 prop 的時(shí)候巴刻，其命名應(yīng)該始終使用 camelCase，而在模板和JSX中應(yīng)該始終使用 kebab-case蛉签。
我們單純的遵循每個(gè)語言的約定胡陪。在 JavaScript 中更自然的是 camelCase。而在 HTML 中則是 kebab-case碍舍。

19柠座、多個(gè)特性的元素

多個(gè)特性的元素應(yīng)該分多行撰寫，每個(gè)特性一行片橡。
反例

<MyComponent foo="a" bar="b" baz="c"/>

好例子

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

20妈经、模板中簡單的表達(dá)式

組件模板應(yīng)該只包含簡單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法捧书。

21吹泡、簡單的計(jì)算屬性

應(yīng)該把復(fù)雜計(jì)算屬性分割為盡可能多的更簡單的屬性。

22经瓷、帶引號(hào)的特性值

非空 HTML 特性值應(yīng)該始終帶引號(hào) (單引號(hào)或雙引號(hào)爆哑，選你 JS 里不用的那個(gè))。
在 HTML 中不帶空格的特性值是可以沒有引號(hào)的舆吮，但這鼓勵(lì)了大家在特征值里不寫空格揭朝，導(dǎo)致可讀性變差。

23歪泳、指令縮寫

指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應(yīng)該要么都用要么都不用萝勤。

24、組件/實(shí)例的選項(xiàng)的順序

組件/實(shí)例的選項(xiàng)應(yīng)該有統(tǒng)一的順序呐伞。
這是我們推薦的組件選項(xiàng)默認(rèn)順序敌卓。它們被劃分為幾大類，所以你也能知道從插件里添加的新屬性應(yīng)該放到哪里伶氢。

1. 副作用 (觸發(fā)組件外的影響)

• el

2. 全局感知(要求組件以外的知識(shí))

• name
• parent

3. 組件類型 (更改組件的類型)

• functional

4. 模板修改器 (改變模板的編譯方式)

• delimiters
• comments

5. 模板依賴 (模板內(nèi)使用的資源)

• components
• directives
• filters

6. 組合 (向選項(xiàng)里合并屬性)

• extends
• mixins

7. 接口 (組件的接口)

• inheritAttrs
• model
• props/propsData

8. 本地狀態(tài) (本地的響應(yīng)式屬性)

• data
• computed

9. 事件(通過響應(yīng)式事件觸發(fā)的回調(diào))

• watch
• 生命周期鉤子 (按照它們被調(diào)用的順序)
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed

10. 非響應(yīng)式的屬性 (不依賴響應(yīng)系統(tǒng)的實(shí)例屬性)

• methods

11. 渲染 (組件輸出的聲明式描述)

• template/render
• renderError

25趟径、元素特性的順序

元素 (包括組件) 的特性應(yīng)該有統(tǒng)一的順序。
這是我們?yōu)榻M件選項(xiàng)推薦的默認(rèn)順序癣防。它們被劃分為幾大類蜗巧，所以你也能知道新添加的自定義特性和指令應(yīng)該放到哪里。

1. 定義 (提供組件的選項(xiàng))

• is

2. 列表渲染 (創(chuàng)建多個(gè)變化的相同元素)

• v-for

3. 條件渲染 (元素是否渲染/顯示)

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

4. 渲染方式 (改變?cè)氐匿秩痉绞?

• v-pre
• v-once

5. 全局感知 (需要超越組件的知識(shí))

• id

6. 唯一的特性 (需要唯一值的特性)

• ref
• key
• slot

7. 雙向綁定 (把綁定和事件結(jié)合起來)

• v-model

8. 其它特性(所有普通的綁定或未綁定的特性)
9. 事件(組件事件監(jiān)聽器)

• v-on

10. 內(nèi)容 (覆寫元素的內(nèi)容)

• v-html
• v-text

26蕾盯、組件/實(shí)例選項(xiàng)中的空行

你可能想在多個(gè)屬性之間增加一個(gè)空行幕屹，特別是在這些選項(xiàng)一屏放不下，需要滾動(dòng)才能都看到的時(shí)候。
當(dāng)你的組件開始覺得密集或難以閱讀時(shí)望拖，在多個(gè)屬性之間添加空行可以讓其變得容易渺尘。在一些諸如 Vim 的編輯器里，這樣格式化后的選項(xiàng)還能通過鍵盤被快速導(dǎo)航说敏。
好例子

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

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

  label: String,
  icon: String
},

computed: {
  formattedValue: function () {
    // ...
  },

  inputClasses: function () {
    // ...
  }
}

27鸥跟、單文件組件的頂級(jí)元素的順序

單文件組件應(yīng)該總是讓 <script>、<template> 和 <style> 標(biāo)簽的順序保持一致盔沫。且 <style> 要放在最后医咨，因?yàn)榱硗鈨蓚€(gè)標(biāo)簽至少要有一個(gè)。

28架诞、沒有在 v-if/v-else-if/v-else 中使用 key

如果一組 v-if + v-else 的元素類型相同拟淮，最好使用 key (比如兩個(gè) <div> 元素)。
默認(rèn)情況下侈贷，Vue 會(huì)盡可能高效的更新 DOM惩歉。這意味著其在相同類型的元素之間切換時(shí)等脂，會(huì)修補(bǔ)已存在的元素俏蛮，而不是將舊的元素移除然后在同一位置添加一個(gè)新元素。如果本不相同的元素被識(shí)別為相同上遥，則會(huì)出現(xiàn)意料之外的副作用搏屑。
反例

<div v-if="error">
  錯(cuò)誤：{{ error }}
</div>
<div v-else>
  {{ results }}
</div>

好例子

<div
  v-if="error"
  key="search-status"
>
  錯(cuò)誤：{{ error }}
</div>
<div
  v-else
  key="search-results"
>
  {{ results }}
</div>

29、scoped 中的元素選擇器

元素選擇器應(yīng)該避免在 scoped 中出現(xiàn)粉楚。
在 scoped 樣式中辣恋，類選擇器比元素選擇器更好，因?yàn)榇罅渴褂迷剡x擇器是很慢的模软。
反例

<template>
  <button>X</button>
</template>
<style scoped>
button {
  background-color: red;
}
</style>

好例子

<template>
  <button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
  background-color: red;
}
</style>

30伟骨、隱性的父子組件通信

應(yīng)該優(yōu)先通過 prop 和事件進(jìn)行父子組件之間的通信，而不是 this.$parent 或改變 prop燃异。
一個(gè)理想的 Vue 應(yīng)用是 prop 向下傳遞携狭，事件向上傳遞的。遵循這一約定會(huì)讓你的組件更易于理解回俐。

31逛腿、非 Flux 的全局狀態(tài)管理

應(yīng)該優(yōu)先通過Vuex管理全局狀態(tài)，而不是通過 this.$root 或一個(gè)全局事件總線仅颇。
通過 this.$root 或全局事件總線管理狀態(tài)在很多簡單的情況下都是很方便的单默，但是并不適用于絕大多數(shù)的應(yīng)用。Vuex 提供的不僅是一個(gè)管理狀態(tài)的中心區(qū)域忘瓦，還是組織搁廓、追蹤和調(diào)試狀態(tài)變更的好工具。