基于Vue官方風(fēng)格指南整理
一、強(qiáng)制
1. 組件名為多個(gè)單詞
組件名應(yīng)該始終是多個(gè)單詞的，根組件 App 除外。
正例：
export default { name: TodoItem, // ... } 復(fù)制代碼反例：
export default { name: Todo, // ... } 復(fù)制代碼2. 組件數(shù)據(jù)
組件的 data 必須是一個(gè)函數(shù)。
當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)。
正例：
// In a .vue file export default { data () { return { foo: bar } } } // 在一個(gè) Vue 的根實(shí)例上直接使用對(duì)象是可以的， // 因?yàn)橹淮嬖谝粋€(gè)這樣的實(shí)例。 new Vue({ data: { foo: bar } }) 復(fù)制代碼反例：
export default { data: { foo: bar } } 復(fù)制代碼3. Prop定義
Prop 定義應(yīng)該盡量詳細(xì)。
在你提交的代碼中，prop 的定義應(yīng)該盡量詳細(xì)，至少需要指定其類型。
正例：
props: { status: String } // 更好的做法！ props: { status: { type: String, required: true, validator: function (value) { return [ syncing, synced, version-conflict, error ].indexOf(value) !== -1 } } } 復(fù)制代碼反例：
// 這樣做只有開發(fā)原型系統(tǒng)時(shí)可以接受 props: [status] 復(fù)制代碼
4. 為v-for設(shè)置鍵值
總是用 key 配合 v-for。
在組件上_總是_必須用 key 配合 v-for，以便維護(hù)內(nèi)部組件及其子樹的狀態(tài)。甚至在元素上維護(hù)可預(yù)測(cè)的行為，比如動(dòng)畫中的對(duì)象固化 (object constancy)，也是一種好的做法。
正例：
復(fù)制代碼
反例：
復(fù)制代碼
5.避免 v-if 和 v-for 用在一起
永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上。
一般我們?cè)趦煞N常見的情況下會(huì)傾向于這樣做：
- 為了過濾一個(gè)列表中的項(xiàng)目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請(qǐng)將 users 替換為一個(gè)計(jì)算屬性 (比如 activeUsers)，讓其返回過濾后的列表。
- 為了避免渲染本應(yīng)該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請(qǐng)將 v-if 移動(dòng)至容器元素上 (比如 ul, ol)。
正例：
復(fù)制代碼
反例：
復(fù)制代碼
6. 為組件樣式設(shè)置作用域
對(duì)于應(yīng)用來說，頂級(jí) App 組件和布局組件中的樣式可以是全局的，但是其它所有組件都應(yīng)該是有作用域的。
這條規(guī)則只和單文件組件有關(guān)。你不一定要使用 scoped 特性。設(shè)置作用域也可以通過 CSS Modules，那是一個(gè)基于 class 的類似 BEM 的策略，當(dāng)然你也可以使用其它的庫或約定。不管怎樣，對(duì)于組件庫，我們應(yīng)該更傾向于選用基于 class 的策略而不是 scoped 特性。
這讓覆寫內(nèi)部樣式更容易：使用了常人可理解的 class 名稱且沒有太高的選擇器優(yōu)先級(jí)，而且不太會(huì)導(dǎo)致沖突。
正例：
復(fù)制代碼
反例：
復(fù)制代碼
二、強(qiáng)烈推薦（增強(qiáng)可讀性）
1. 組件文件
只要有能夠拼接文件的構(gòu)建系統(tǒng)，就把每個(gè)組件多帶帶分成文件。
當(dāng)你需要編輯一個(gè)組件或查閱一個(gè)組件的用法時(shí)，可以更快速的找到它。
正例：
components/ |- TodoList.vue |- TodoItem.vue 復(fù)制代碼
反例：
Vue.component(TodoList, { // ... }) Vue.component(TodoItem, { // ... }) 復(fù)制代碼2. 單文件組件文件的大小寫
單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)
正例：
components/ |- MyComponent.vue 復(fù)制代碼
反例：
components/ |- myComponent.vue |- mycomponent.vue 復(fù)制代碼
3. 基礎(chǔ)組件名
應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭，比如 Base、App 或 V。
正例：
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue 復(fù)制代碼
反例：
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue 復(fù)制代碼
4. 單例組件名
只應(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è)頁面里只使用一次。
正例：
components/ |- TheHeading.vue |- TheSidebar.vue 復(fù)制代碼
反例：
components/ |- Heading.vue |- MySidebar.vue 復(fù)制代碼
5. 緊密耦合的組件名
和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名。
如果一個(gè)組件只在某個(gè)父組件的場(chǎng)景下有意義，這層關(guān)系應(yīng)該體現(xiàn)在其名字上。因?yàn)榫庉嬈魍ǔ?huì)按字母順序組織文件，所以這樣做可以把相關(guān)聯(lián)的文件排在一起。
正例：
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue 復(fù)制代碼
反例：
components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue 復(fù)制代碼
6. 組件名中的單詞順序
組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾。
正例：
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue 復(fù)制代碼
反例：
components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue 復(fù)制代碼
7. 模板中的組件名大小寫
總是 PascalCase 的
正例：
反例：
8. 完整單詞的組件名
組件名應(yīng)該傾向于完整單詞而不是縮寫。
正例：
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue 復(fù)制代碼
反例：
components/ |- SdSettings.vue |- UProfOpts.vue 復(fù)制代碼
9. 多個(gè)特性的元素
多個(gè)特性的元素應(yīng)該分多行撰寫，每個(gè)特性一行。
正例：
[object Object]
反例：
[object Object]
10. 模板中簡(jiǎn)單的表達(dá)式
組件模板應(yīng)該只包含簡(jiǎn)單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法。
復(fù)雜表達(dá)式會(huì)讓你的模板變得不那么聲明式。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么，而非如何計(jì)算那個(gè)值。而且計(jì)算屬性和方法使得代碼可以重用。
正例：
{{ normalizedFullName }} // 復(fù)雜表達(dá)式已經(jīng)移入一個(gè)計(jì)算屬性 computed: { normalizedFullName: function () { return this.fullName.split( ).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join( ) } } 復(fù)制代碼反例：
{{ fullName.split( ).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join( ) }} 復(fù)制代碼11. 簡(jiǎn)單的計(jì)算屬性
正例：
computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } } 復(fù)制代碼反例：
computed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } 復(fù)制代碼12. 帶引號(hào)的特性值
非空 HTML 特性值應(yīng)該始終帶引號(hào) (單引號(hào)或雙引號(hào)，選你 JS 里不用的那個(gè))。
在 HTML 中不帶空格的特性值是可以沒有引號(hào)的，但這樣做常常導(dǎo)致帶空格的特征值被回避，導(dǎo)致其可讀性變差。
正例：
反例：
13. 指令縮寫
都用指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)
正例：
[object Object]復(fù)制代碼
反例：
[object Object]復(fù)制代碼
三、推薦
1. 單文件組件的頂級(jí)元素的順序
單文件組件應(yīng)該總是讓
