命名規(guī)范
A優(yōu)先級(jí)
- 組件名應(yīng)該始終是多個(gè)單詞：避免跟現(xiàn)有的以及未來的 HTML 元素相沖突
B優(yōu)先級(jí)
- 單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)潘酗，要么始終是橫線連接 (kebab-case)类溢；
- 應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的肤无、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭箫津，比如 Base、App 或 V蜕着。
- 只應(yīng)該擁有單個(gè)活躍實(shí)例的組件應(yīng)該以 The 前綴命名僵蛛，以示其唯一性。
- 和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名瑟幕。
- 單詞順序：組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開頭磕蒲，以描述性的修飾詞結(jié)尾。
- 對(duì)于絕大多數(shù)項(xiàng)目來說只盹，在單文件組件和字符串模板中組件名應(yīng)該總是 PascalCase 的——但是在 **DOM **模板中總是 kebab-case 的辣往。
-
JS/JSX 中的組件名應(yīng)該始終是 PascalCase 的，盡管在較為簡(jiǎn)單的應(yīng)用中只使用
Vue.component進(jìn)行全局組件注冊(cè)時(shí)殖卑，可以使用 kebab-case 字符串排吴。 - 組件名應(yīng)該傾向于完整單詞而不是縮寫。
- 在聲明 prop 的時(shí)候懦鼠，其命名應(yīng)該始終使用 camelCase钻哩，而在模板和 JSX中應(yīng)該始終使用 kebab-case。
其他
A優(yōu)先級(jí)
- 組件的 data 必須是一個(gè)函數(shù)肛冶。
- prop 的定義應(yīng)該盡量詳細(xì)街氢，至少需要指定其類型。
- 總是用 key 配合 v-for睦袖。
- 永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上珊肃。
- 所有組件都應(yīng)該是有作用域的。針對(duì)style馅笙，可以使用
scoped特性伦乔、CSS Modules和BEM 約定。 - 在插件董习、混入等擴(kuò)展中始終為自定義的私有屬性使用 $_ 前綴烈和。并附帶一個(gè)命名空間以回避和其它作者的沖突 (比如 $_yourPluginName_)。
B優(yōu)先級(jí)
- 只要有能夠拼接文件的構(gòu)建系統(tǒng)皿淋，就把每個(gè)組件單獨(dú)分成文件招刹。
- 在單文件組件恬试、字符串模板和 JSX 中沒有內(nèi)容的組件應(yīng)該是自閉合的——但在 DOM 模板里永遠(yuǎn)不要這樣做。
- 多個(gè)特性的元素應(yīng)該分多行撰寫疯暑，每個(gè)特性一行训柴。
- 組件模板應(yīng)該只包含簡(jiǎn)單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法妇拯。
- 應(yīng)該把復(fù)雜計(jì)算屬性分割為盡可能多的更簡(jiǎn)單的屬性幻馁。
- 非空 HTML 特性值應(yīng)該始終帶引號(hào) (單引號(hào)或雙引號(hào)，選你 JS 里不用的那個(gè))越锈。
- 指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應(yīng)該要么都用要么都不用宣赔。
C優(yōu)先級(jí)
- 組件/實(shí)例的選項(xiàng)應(yīng)該有統(tǒng)一的順序。
- 副作用 (觸發(fā)組件外的影響)
el- 全局感知 (要求組件以外的知識(shí))
name
parent- 組件類型 (更改組件的類型)
functional- 模板修改器 (改變模板的編譯方式)
delimiters
comments- 模板依賴 (模板內(nèi)使用的資源)
components
directives
filters- 組合 (向選項(xiàng)里合并屬性)
extends
mixins- 接口 (組件的接口)
inheritAttrs
model
props/propsData- 本地狀態(tài) (本地的響應(yīng)式屬性)
data
computed- 事件 (通過響應(yīng)式事件觸發(fā)的回調(diào))
watch
生命周期鉤子 (按照它們被調(diào)用的順序)- 非響應(yīng)式的屬性 (不依賴響應(yīng)系統(tǒng)的實(shí)例屬性)
methods- 渲染 (組件輸出的聲明式描述)
template/render
renderError
- 元素 (包括組件) 的特性應(yīng)該有統(tǒng)一的順序瞪浸。
- 定義 (提供組件的選項(xiàng))
is- 列表渲染 (創(chuàng)建多個(gè)變化的相同元素)
v-for- 條件渲染 (元素是否渲染/顯示)
v-if
v-else-if
v-else
v-show
v-cloak- 渲染方式 (改變?cè)氐匿秩痉绞?
v-pre
v-once- 全局感知 (需要超越組件的知識(shí))
id- 唯一的特性 (需要唯一值的特性)
ref
key
slot- 雙向綁定 (把綁定和事件結(jié)合起來)
v-model- 其它特性 (所有普通的綁定或未綁定的特性)
- 事件 (組件事件監(jiān)聽器)
v-on- 內(nèi)容 (覆寫元素的內(nèi)容)
v-html
v-text
- 當(dāng)你的組件開始覺得密集或難以閱讀時(shí)儒将，在多個(gè)屬性之間添加空行可以讓其變得容易。
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
},
computed: {
formattedValue: function () {
// ...
},
inputClasses: function () {
// ...
}
}
- 單文件組件應(yīng)該總是讓
<script>对蒲、<template>和<style>標(biāo)簽的順序保持一致钩蚊。且<style>要放在最后，因?yàn)榱硗鈨蓚€(gè)標(biāo)簽至少要有一個(gè)蹈矮。
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- 或者 -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
參考文獻(xiàn)：Vue風(fēng)格指南
