資訊專欄INFORMATION COLUMN
摘要：官方推薦的風格指南個人筆記最近剛注意到官方多了一個風格指南的推薦。中始終用組件命名因為官方推薦風格命名，所以能用就用組件命名單詞應該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。
Vue官方推薦的風格指南-個人筆記
最近剛注意到vue官方多了一個vue風格指南的推薦。
因為業務中一直用的vue，所以梳理學習一下，來增加自己代碼的規范性，效果不錯也可以安利到團隊。
文檔沒有對JS或者HTML風格做約束，而是僅僅針對vue代碼做了分類推薦。
一共按照優先級分4類：
優先級A：必要的。為了規避錯誤，這種代碼風格是必須的
優先級B：強烈推薦。增加項目的可讀性和開發體驗
優先級C：推薦。有時可能同時有幾種不錯的選擇。需要注意：前后一致、理由充分
優先級D：謹慎使用。為了該有潛在風險的代碼敲個警鐘。
為什么寫這篇文文章？對我來說有2個目的，
一是通過思維導圖 + 博客輸出的方式加深印象
二是學習過程中具體的小問題，應該用自己的話試著再解釋一遍。
比如Vue組需要有css作用域。但是scoped和css module有什么區別嗎？
比如v-for和v-if為什么不推薦綁定在一個元素上？
1.優先級A的code style這些推薦，必須遵守。如果不這么做，基本要造成性能低或可維護性差的問題
1.vue組件名稱推薦由多個單詞構成
2.組件data數據推薦用函數return
3.props推薦更加詳細的定義type/default/require等
4.v-for推薦有配套的:key
5.v-for和v-if避免同在一起
6.vue組件樣式推薦設置作用域
7.自定義的私有屬性，推薦$_ + 命名空間作為前綴
下面是每一條風格指南的推薦理由，我覺得需要在意的，用粗體標注
1.vue組件名稱推薦由多個單詞構成
為了避免vue組件名和未來html元素的名稱重復。因為html的標簽都是單個單詞
2.組件data數據推薦用函數return
除了根組件之外，其他的vue組件很可能被復用，如果data是{},那么這些組件的數據會互相影響。
但是我們希望每一個組件，即便是被復用的組件，每個組件的data都應該是獨立的狀態
3.props推薦用更加詳細的定義
//很好理解，詳細的約定肯定比簡寫的約定更可靠。
props: { // 推薦
name : {
type: String,
default: "ziwei",
required: true
}
}
props: ["name"] // 不推薦
4.v-for推薦配套的:key
為了更加高效的渲染dom。vue有“就地復用”的策略。 比如一個列表的數據沒變，只是順序發生了改變。如果所有列表的dom重新渲染就很“浪費” 但是通過唯一的:key復用之前的dom的話，性能就好很多。
5.v-for和v-if避免使用在同一個組件里
這里推薦看文檔，例子和解釋都很清晰。v-for和v-if同時出現的話，先v-for，后v-if 有v-for和v-if同時寫到li上的情況有2種： - 如果是希望控制ul的顯示/隱藏，推薦放到ul上，而不是li上。這樣“節省”了li的渲染 - 如果是因為根據條件控制部分li的顯示/隱藏，建議用把ul數據對象改成計算屬性。
6.vue組件樣式推薦設置作用域
可以使用scoped和css module。但是兩者還是有一些區別的。 scoped被設計的初衷是不能讓當前組件的樣式，影響其他組件的樣式。所以你寫組件庫，不要用scoped css moudle是利用命名空間和hash來保證作用域
關于兩者區別的鏈接
https://juejin.im/post/5a1c06...
https://www.jb51.net/article/...
關于css選擇器對渲染性能的影響
https://www.jianshu.com/p/268...
7.自定義的私有屬性，推薦$_ + 命名空間作為前綴
我理解這里，就是如果你要第三方插件或者，要自定義vue屬性時。 vue給你推薦了一種命名空間，比如這樣定義 $_myUtils_sayHi優先級B的code style
1.能用.vue寫的組件，盡量不同vue.component
2.vue組件命名，用PascalCase或者短橫線，風格保持統一。
3.基礎組件命名，以Base前綴開頭，以顯示其通用性
4.單例組件命名，以The前綴開頭，以顯示其獨特性
5.緊密耦合的組件命名。比如緊密耦合的父子組件，子組件以父組件名稱為前綴
6.組件命名單詞的順序。先名詞后形容詞
7.自閉合組件的寫法。如果有編譯器的vue用自閉合寫法，以顯示沒有傳入屬性
8.不同模板中vue命名大小寫。如果有編譯器的話PascalCase,否則用短橫線命名
9.JS/JSX中始終用PascalCase組件命名
10.組件命名單詞應該是完整的單詞
11.props的命名方式，最自然的方法。JS里用駝峰命名，html里用短橫線
12.vue組件有多個屬性，分多行來寫更加清晰易讀
13.模板里復雜邏輯用計算屬性或者method
14.復雜的計算屬性或者method，拆分成多個
15.html模板的屬性推薦用雙引號的
16.指令縮寫要么不寫，要么都用縮寫
下面是每一條風格指南的推薦理由,我覺得需要在意的，用粗體標注
1.能用.vue寫的組件，盡量不同vue.component
好理解，vue單文件組織代碼，是官方推薦的最佳實踐，基本都是這樣用
2.vue組件名稱，用PascalCase或者短橫線，風格保持統一
這個可以注意下，PascalCase是類似OrderSku.vue這種命名風格 我之前經常用駝峰命名vue組件
3.基礎組件命名，以Base前綴開頭，以顯示其通用性
BaseHeader.vue BaseContent.vue BaseFooter.vue // 這類風格，通過名字，可以理解它是通用基礎組件
4.單例組件命名，以The前綴開頭，以顯示其獨特性
類似設計模式里的單例模式，就是這個vue組件只在一個頁面出現一次。 TheSideBar.vue這種名字，可以表示它是獨一無二的不可復用的組件 如果某個組件只是在每個頁面最多用了一次，并且沒有props。就是不可復用組件，用The前綴命名。
5.緊密耦合的組件命名。比如緊密耦合的父子組件，子組件以父組件名稱為前綴
MainOrder.vue MainOrderItem.vue // 類似這種緊密耦合的父子組件，子組件把父組件的名字作為前綴。 // 這樣這樣可以通過名稱，顯示他們的耦合關系，并且在編輯器里也很好找到
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 // 大概可以感受到吧，我理解是因為編輯器的默認排序是按照字母排序。這樣方便我們找到相似的文件
7.自閉合組件的寫法。
自閉合組件是vue推薦的寫法。自閉合可以表示組件沒有任何屬性 但是如果你用的是沒有編譯器的vue版本，也就是不用.vue的話，那么html里不支持自定義屬性的自閉合寫法。 所以這種情況下，只能用短橫線寫法
8.不同模板中vue命名大小寫。如果有編譯器的話PascalCase,否則用短橫線命名
類似的，SkuOrder.vue這類PascalCase命名規則是vue推薦的 但是如果是沒有編譯器的vue版本，在html里大小寫不敏感，你只能用短橫線命名。
9.JS/JSX中始終用PascalCase組件命名
因為官方推薦PascalCase風格命名，所以能用就用
10.組件命名單詞應該是完整的單詞
完整單詞帶易讀性的好處，和書寫麻煩的缺點。 但是編輯器的智能提示已經解決了寫長單詞的麻煩了,所以還是推薦用完整單詞
11.props的命名方式
props: {
greetingText: String
}
12.vue組件有多個屬性，分多行來寫更加清晰易讀
好理解，分多行寫的話易讀性更強，這個我之前沒注意
13.模板里復雜邏輯用計算屬性或者method (很好理解，就不解釋了)
14.復雜的計算屬性或者method，拆分成多個 (很好理解，就不解釋了)15.html模板的屬性推薦用雙引號的
這個注意下，我之前很不喜歡在html里寫“”，因為我覺得雙引號容易讓人誤以為是string 但是官方推薦用引號，說是在有空格的情況下，可能縮進不正常，影響易讀性。所以乖乖聽話就完事了
16.指令縮寫要么不寫，要么都用縮寫
注意保持風格統一，要么不寫，要么都寫3.優先級C的code style （推薦看文檔）
推薦看文檔，因為文檔推薦了順序，但是大部分選型我都不常用，所以我只給自己常用的的選項排序
1.組件實例選項的順序
2.元素特性的順序
3.組件實例選項，之間添加一個空行
4.單文件組件的頂級元素的組織順序
1.組件實例選項的順序
- components - filters - data - compouted - watch - 所有的生命周期鉤子 - methods
2.元素特性的順序
- v-for - v-if / v-show - id - ref / key / slot - v-model - v-on
3.組件實例選項之間，建議加一個空格4.單文件組件，頂級元素的順序