摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點(diǎn)。

Vue官方推薦的風(fēng)格指南-個(gè)人筆記

最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。

因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。

文檔沒有對(duì)JS或者HTML風(fēng)格做約束，而是僅僅針對(duì)vue代碼做了分類推薦。

一共按照優(yōu)先級(jí)分4類：

優(yōu)先級(jí)A：必要的。為了規(guī)避錯(cuò)誤，這種代碼風(fēng)格是必須的

優(yōu)先級(jí)B：強(qiáng)烈推薦。增加項(xiàng)目的可讀性和開發(fā)體驗(yàn)

優(yōu)先級(jí)C：推薦。有時(shí)可能同時(shí)有幾種不錯(cuò)的選擇。需要注意：前后一致、理由充分

優(yōu)先級(jí)D：謹(jǐn)慎使用。為了該有潛在風(fēng)險(xiǎn)的代碼敲個(gè)警鐘。

為什么寫這篇文文章？

對(duì)我來說有2個(gè)目的，

一是通過思維導(dǎo)圖 + 博客輸出的方式加深印象

二是學(xué)習(xí)過程中具體的小問題，應(yīng)該用自己的話試著再解釋一遍。

比如Vue組需要有css作用域。但是scoped和css module有什么區(qū)別嗎？

比如v-for和v-if為什么不推薦綁定在一個(gè)元素上？

1.優(yōu)先級(jí)A的code style

這些推薦，必須遵守。如果不這么做，基本要造成性能低或可維護(hù)性差的問題

1.vue組件名稱推薦由多個(gè)單詞構(gòu)成

2.組件data數(shù)據(jù)推薦用函數(shù)return

3.props推薦更加詳細(xì)的定義type/default/require等

4.v-for推薦有配套的:key

5.v-for和v-if避免同在一起

6.vue組件樣式推薦設(shè)置作用域

7.自定義的私有屬性，推薦$_ + 命名空間作為前綴

下面是每一條風(fēng)格指南的推薦理由，我覺得需要在意的，用粗體標(biāo)注

1.vue組件名稱推薦由多個(gè)單詞構(gòu)成

為了避免vue組件名和未來html元素的名稱重復(fù)。因?yàn)閔tml的標(biāo)簽都是單個(gè)單詞

2.組件data數(shù)據(jù)推薦用函數(shù)return

除了根組件之外，其他的vue組件很可能被復(fù)用，如果data是{},那么這些組件的數(shù)據(jù)會(huì)互相影響。

但是我們希望每一個(gè)組件，即便是被復(fù)用的組件，每個(gè)組件的data都應(yīng)該是獨(dú)立的狀態(tài)

3.props推薦用更加詳細(xì)的定義

//很好理解，詳細(xì)的約定肯定比簡(jiǎn)寫的約定更可靠。

props: {                     // 推薦
    name : {
        type: String,
        default: "ziwei",
        required: true
    }
}

props: ["name"]              // 不推薦

4.v-for推薦配套的:key

為了更加高效的渲染dom。vue有“就地復(fù)用”的策略。

比如一個(gè)列表的數(shù)據(jù)沒變，只是順序發(fā)生了改變。如果所有列表的dom重新渲染就很“浪費(fèi)”

但是通過唯一的:key復(fù)用之前的dom的話，性能就好很多。

5.v-for和v-if避免使用在同一個(gè)組件里

這里推薦看文檔，例子和解釋都很清晰。v-for和v-if同時(shí)出現(xiàn)的話，先v-for，后v-if

有v-for和v-if同時(shí)寫到li上的情況有2種：

- 如果是希望控制ul的顯示/隱藏，推薦放到ul上，而不是li上。這樣“節(jié)省”了li的渲染
- 如果是因?yàn)楦鶕?jù)條件控制部分li的顯示/隱藏，建議用把ul數(shù)據(jù)對(duì)象改成計(jì)算屬性。

6.vue組件樣式推薦設(shè)置作用域

可以使用scoped和css module。但是兩者還是有一些區(qū)別的。

scoped被設(shè)計(jì)的初衷是不能讓當(dāng)前組件的樣式，影響其他組件的樣式。所以你寫組件庫，不要用scoped

css moudle是利用命名空間和hash來保證作用域

關(guān)于兩者區(qū)別的鏈接

https://juejin.im/post/5a1c06...
https://www.jb51.net/article/...

關(guān)于css選擇器對(duì)渲染性能的影響

https://www.jianshu.com/p/268...

7.自定義的私有屬性，推薦$_ + 命名空間作為前綴

我理解這里，就是如果你要第三方插件或者，要自定義vue屬性時(shí)。

vue給你推薦了一種命名空間，比如這樣定義 $_myUtils_sayHi

優(yōu)先級(jí)B的code style

1.能用.vue寫的組件，盡量不同vue.component

2.vue組件命名，用PascalCase或者短橫線，風(fēng)格保持統(tǒng)一。

3.基礎(chǔ)組件命名，以Base前綴開頭，以顯示其通用性

4.單例組件命名，以The前綴開頭，以顯示其獨(dú)特性

5.緊密耦合的組件命名。比如緊密耦合的父子組件，子組件以父組件名稱為前綴

6.組件命名單詞的順序。先名詞后形容詞

7.自閉合組件的寫法。如果有編譯器的vue用自閉合寫法，以顯示沒有傳入屬性

8.不同模板中vue命名大小寫。如果有編譯器的話PascalCase,否則用短橫線命名

9.JS/JSX中始終用PascalCase組件命名

10.組件命名單詞應(yīng)該是完整的單詞

11.props的命名方式，最自然的方法。JS里用駝峰命名，html里用短橫線

12.vue組件有多個(gè)屬性，分多行來寫更加清晰易讀

13.模板里復(fù)雜邏輯用計(jì)算屬性或者method

14.復(fù)雜的計(jì)算屬性或者method，拆分成多個(gè)

15.html模板的屬性推薦用雙引號(hào)的

16.指令縮寫要么不寫，要么都用縮寫

下面是每一條風(fēng)格指南的推薦理由,我覺得需要在意的，用粗體標(biāo)注

1.能用.vue寫的組件，盡量不同vue.component

好理解，vue單文件組織代碼，是官方推薦的最佳實(shí)踐，基本都是這樣用

2.vue組件名稱，用PascalCase或者短橫線，風(fēng)格保持統(tǒng)一

這個(gè)可以注意下，PascalCase是類似OrderSku.vue這種命名風(fēng)格

我之前經(jīng)常用駝峰命名vue組件

3.基礎(chǔ)組件命名，以Base前綴開頭，以顯示其通用性

BaseHeader.vue
BaseContent.vue
BaseFooter.vue
// 這類風(fēng)格，通過名字，可以理解它是通用基礎(chǔ)組件

4.單例組件命名，以The前綴開頭，以顯示其獨(dú)特性

類似設(shè)計(jì)模式里的單例模式，就是這個(gè)vue組件只在一個(gè)頁面出現(xiàn)一次。

TheSideBar.vue這種名字，可以表示它是獨(dú)一無二的不可復(fù)用的組件

如果某個(gè)組件只是在每個(gè)頁面最多用了一次，并且沒有props。就是不可復(fù)用組件，用The前綴命名。

5.緊密耦合的組件命名。比如緊密耦合的父子組件，子組件以父組件名稱為前綴

MainOrder.vue
MainOrderItem.vue

// 類似這種緊密耦合的父子組件，子組件把父組件的名字作為前綴。
// 這樣這樣可以通過名稱，顯示他們的耦合關(guān)系，并且在編輯器里也很好找到

6.組件命名單詞的順序。先名詞后形容詞

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

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

// 大概可以感受到吧，我理解是因?yàn)榫庉嬈鞯哪J(rèn)排序是按照字母排序。這樣方便我們找到相似的文件

7.自閉合組件的寫法。

自閉合組件是vue推薦的寫法。自閉合可以表示組件沒有任何屬性

但是如果你用的是沒有編譯器的vue版本，也就是不用.vue的話，那么html里不支持自定義屬性的自閉合寫法。
所以這種情況下，只能用短橫線寫法

8.不同模板中vue命名大小寫。如果有編譯器的話PascalCase,否則用短橫線命名

類似的，SkuOrder.vue這類PascalCase命名規(guī)則是vue推薦的

但是如果是沒有編譯器的vue版本，在html里大小寫不敏感，你只能用短橫線命名。

9.JS/JSX中始終用PascalCase組件命名

因?yàn)楣俜酵扑]PascalCase風(fēng)格命名，所以能用就用

10.組件命名單詞應(yīng)該是完整的單詞

完整單詞帶易讀性的好處，和書寫麻煩的缺點(diǎn)。

但是編輯器的智能提示已經(jīng)解決了寫長單詞的麻煩了,所以還是推薦用完整單詞

11.props的命名方式

props: {
  greetingText: String
}


最自然的方法。JS里用駝峰命名，html里用短橫線。這個(gè)要注意，我之前很隨意

12.vue組件有多個(gè)屬性，分多行來寫更加清晰易讀

好理解，分多行寫的話易讀性更強(qiáng)，這個(gè)我之前沒注意

13.模板里復(fù)雜邏輯用計(jì)算屬性或者method (很好理解，就不解釋了)
14.復(fù)雜的計(jì)算屬性或者method，拆分成多個(gè) (很好理解，就不解釋了)
15.html模板的屬性推薦用雙引號(hào)的

這個(gè)注意下，我之前很不喜歡在html里寫“”，因?yàn)槲矣X得雙引號(hào)容易讓人誤以為是string

但是官方推薦用引號(hào)，說是在有空格的情況下，可能縮進(jìn)不正常，影響易讀性。所以乖乖聽話就完事了

16.指令縮寫要么不寫，要么都用縮寫

注意保持風(fēng)格統(tǒng)一，要么不寫，要么都寫

3.優(yōu)先級(jí)C的code style （推薦看文檔）

推薦看文檔，因?yàn)槲臋n推薦了順序，但是大部分選型我都不常用，所以我只給自己常用的的選項(xiàng)排序

1.組件實(shí)例選項(xiàng)的順序

2.元素特性的順序

3.組件實(shí)例選項(xiàng)，之間添加一個(gè)空行

4.單文件組件的頂級(jí)元素的組織順序

1.組件實(shí)例選項(xiàng)的順序

- components
- filters
- data
- compouted
- watch
- 所有的生命周期鉤子
- methods

2.元素特性的順序

- v-for
- v-if / v-show
- id
- ref / key / slot
- v-model
- v-on

3.組件實(shí)例選項(xiàng)之間，建議加一個(gè)空格
4.單文件組件，頂級(jí)元素的順序