前面的話
Vue官網的風格指南按照優先級（依次為必要、強烈推薦、推薦、謹慎使用）分類，且代碼間隔較大，不易查詢。本文按照類型分類，并對部分示例或解釋進行縮減，是Vue風格指南的精簡版
組件名稱
【組件名為多個單詞】（必要）
組件名應該始終是多個單詞的，根組件 App 除外。 這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的
//badVue.component('todo', {})//goodVue.component('todo-item', {})【單文件組件文件名應該要么始終是單詞大寫開頭 (PascalCase)，要么始終橫線連接 (kebab-case)】（強烈推薦）
//badmycomponent.vue//goodMyComponent.vue//goodmy-component.vue
【基礎組件名要有一個特定前綴開頭】（強烈推薦）
應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V
//badcomponents/|- MyButton.vue|- VueTable.vue|- Icon.vue//goodcomponents/|- BaseButton.vue|- BaseTable.vue|- BaseIcon.vue
【只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其唯一性】（強烈推薦）
這不意味著組件只可用于一個單頁面，而是 每個頁面 只使用一次，這些組件永遠不接受任何 prop
//badcomponents/|- Heading.vue|- MySidebar.vue//goodcomponents/|- TheHeading.vue|- TheSidebar.vue
【和父組件緊密耦合的子組件應該以父組件名作為前綴命名】（強烈推薦）
//badcomponents/|- TodoList.vue|- TodoItem.vue|- TodoButton.vue//goodcomponents/|- SearchSidebar.vue|- SearchSidebarNavigation.vue
【組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾】（強烈推薦）
//badcomponents/|- ClearSearchButton.vue|- ExcludeFromSearchInput.vue|- LaunchOnStartupCheckbox.vue|- RunSearchButton.vue|- SearchInput.vue|- TermsCheckbox.vue//goodcomponents/|- SearchButtonClear.vue|- SearchButtonRun.vue|- SearchInputQuery.vue|- SearchInputExcludeGlob.vue|- SettingsCheckboxTerms.vue|- SettingsCheckboxLaunchOnStartup.vue
【單文件組件和字符串模板中組件名應總是PascalCase――但在DOM模板中總是kebab-case】（強烈推薦）
//bad<!-- 在單文件組件和字符串模板中 --><mycomponent/><myComponent/><!-- 在 DOM 模板中 --><MyComponent></MyComponent>//good<!-- 在單文件組件和字符串模板中 --><MyComponent/><!-- 在 DOM 模板中 --><my-component></my-component>
【組件名應該傾向于完整單詞而不是縮寫】（強烈推薦）
//badcomponents/|- SdSettings.vue|- UProfOpts.vue//goodcomponents/|- StudentDashboardSettings.vue|- UserProfileOptions.vue
組件相關
【單文件組件、字符串模板和JSX中沒有內容的組件應該自閉合――但在DOM模板里不要這樣做】（強烈推薦）
自閉合組件表示它們不僅沒有內容，而且刻意沒有內容
//bad<!-- 在單文件組件、字符串模板和 JSX 中 --><MyComponent></MyComponent><!-- 在 DOM 模板中 --><my-component/>//good<!-- 在單文件組件、字符串模板和 JSX 中 --><MyComponent/><!-- 在 DOM 模板中 --><my-component></my-component>
【為組件樣式設置作用域】（必要）
這條規則只和單文件組件有關。 不一定 要使用 scoped 特性。設置作用域也可以通過 CSS Modules，或者使用其它的庫或約定
//bad<template><button class="btn btn-close">X</button></template><style>.btn-close {background-color: red;}</style>//good<template><button class="btn btn-close">X</button></template><style scoped>.btn-close {background-color: red;}</style>//good<template><button :class="[$style.button, $style.buttonClose]">X</button></template><style module>.btn-close {background-color: red;}</style>【單文件組件應該總是讓 <script>、<template> 和 <style> 標簽的順序保持一致】（推薦）
//good<!-- ComponentA.vue --><script>/* ... */</script><template>...</template><style>/* ... */</style><!-- ComponentB.vue --><script>/* ... */</script><template>...</template><style>/* ... */</style>
【一個文件中只有一個組件】（強烈推薦）
//badVue.component('TodoList', {})Vue.component('TodoItem', {})//goodcomponents/|- TodoList.vue|- TodoItem.vue【組件選項默認順序】（推薦）
1、副作用 (觸發組件外的影響)
el
2、全局感知 (要求組件以外的知識)
name
parent
3、組件類型 (更改組件的類型)
functional
4、模板修改器 (改變模板的編譯方式)
delimiters
comments
5、模板依賴 (模板內使用的資源)
components
directives
filters
6、組合 (向選項里合并屬性)
extends
mixins
7、接口 (組件的接口)
inheritAttrs
model
props/propsData
8、本地狀態 (本地的響應式屬性)
data
computed
9、事件 (通過響應式事件觸發的回調)
watch
生命周期鉤子 (按照它們被調用的順序)
10、非響應式的屬性 (不依賴響應系統的實例屬性)
methods
11、渲染 (組件輸出的聲明式描述)
template/render
renderError
prop
【Prop 定義應該盡量詳細】（必要）
細致的 prop 定義有兩個好處： 1、它們寫明了組件的 API，所以很容易看懂組件的用法； 2、在開發環境下，如果向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源
//badprops: ['status']//goodprops: { status: String}//betterprops: { status: { type: String, required: true }}【聲明prop時，其命名應始終使用camelCase，而在模板和JSX中應始終使用kebab-case】（強烈推薦）
//badprops: {'greeting-text': String}<WelcomeMessage greetingText="hi"/>//goodprops: {greetingText: String}<WelcomeMessage greeting-text="hi"/>指令及特性
【總是用 key 配合 v-for】（必要）
//bad <li v-for="todo in todos">//good <li v-for="todo in todos":key="todo.id">
【不要把 v-if 和 v-for 同時用在同一個元素上】（必要）
//bad<li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} <li>//good<li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} <li>【多個特性的元素應該分多行撰寫，每個特性一行】（強烈推薦）
//bad<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">//good<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
【元素特性默認順序】（推薦）
1、定義 (提供組件的選項)
is
2、列表渲染 (創建多個變化的相同元素)
v-for
3、條件渲染 (元素是否渲染/顯示)
v-if
v-else-if
v-else
v-show
v-cloak
4、渲染方式 (改變元素的渲染方式)
v-pre
v-once
5、全局感知 (需要超越組件的知識)
id
6、唯一的特性 (需要唯一值的特性)
ref
key
slot
7、雙向綁定 (把綁定和事件結合起來)
v-model
8、其它特性 (所有普通的綁定或未綁定的特性)
9、事件 (組件事件監聽器)
v-on
10、內容 (復寫元素的內容)
v-html
v-text
屬性
【私有屬性名】（必要）
在插件、混入等擴展中始終為自定義的私有屬性使用 $_ 前綴，并附帶一個命名空間以回避和其它作者的沖突 (比如 $_yourPluginName_ )
//bad methods: {update: function () { }}//bad methods: {_update: function () { } }//bad methods: {$update: function () { }}//bad methods: {$_update: function () { }}//good methods: { $_myGreatMixin_update: function () { }}【組件的data必須是一個函數】（必要）
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數
//badVue.component('some-comp', { data: { foo: 'bar' }})//goodVue.component('some-comp', { data: function () { return { foo: 'bar' } }})【組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法】（強烈推薦）
//bad{{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ')}}//goodcomputed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }}【應該把復雜計算屬性分割為盡可能多的更簡單的屬性】（強烈推薦）
//badcomputed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) }}//goodcomputed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount }}【當組件開始覺得密集或難以閱讀時，在多個屬性之間添加空行可以讓其變得容易】（推薦）
//goodprops: { value: { type: String, required: true }, focused: { type: Boolean, default: false }}謹慎使用
1、元素選擇器應該避免在 scoped 中出現
在 scoped 樣式中，類選擇器比元素選擇器更好，因為大量使用元素選擇器是很慢的
//bad<style scoped>button { background-color: red;}</style>//good<style scoped>.btn-close { background-color: red;}</style>2、應該優先通過 prop 和事件進行父子組件之間的通信，而不是 this.$parent 或改變 prop
3、應該優先通過 Vuex 管理全局狀態，而不是通過 this.$root 或一個全局事件總線
4、如果一組 v-if + v-else 的元素類型相同，最好使用 key (比如兩個 <div> 元素)
//bad<div v-if="error"> 錯誤：{{ error }}</div><div v-else> {{ results }}</div>//good<div v-if="error" key="search-status"> 錯誤：{{ error }}</div><div v-else key="search-results"> {{ results }}</div>總結
以上所述是小編給大家介紹的Vue精簡版風格指南，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
