Vue精簡(jiǎn)版風(fēng)格概述

更新時(shí)間：2018年01月30日 11:02:16 作者：小火柴的藍(lán)色理想

本篇文章給大家講解了一下Vue精簡(jiǎn)版風(fēng)格的相關(guān)知識(shí)點(diǎn)內(nèi)容以及分享了實(shí)例代碼，有興趣的朋友參考下。

前面的話

Vue官網(wǎng)的風(fēng)格指南按照優(yōu)先級(jí)（依次為必要、強(qiáng)烈推薦、推薦、謹(jǐn)慎使用）分類，且代碼間隔較大，不易查詢。本文按照類型分類，并對(duì)部分示例或解釋進(jìn)行縮減，是Vue風(fēng)格指南的精簡(jiǎn)版

組件名稱

【組件名為多個(gè)單詞】（必要）

組件名應(yīng)該始終是多個(gè)單詞的，根組件 App 除外。這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突，因?yàn)樗械?HTML 元素名稱都是單個(gè)單詞的

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

【單文件組件文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)，要么始終橫線連接 (kebab-case)】（強(qiáng)烈推薦）

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

【基礎(chǔ)組件名要有一個(gè)特定前綴開頭】（強(qiáng)烈推薦）

應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭，比如 Base、App 或 V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

【只應(yīng)該擁有單個(gè)活躍實(shí)例的組件應(yīng)該以 The 前綴命名，以示其唯一性】（強(qiáng)烈推薦）

這不意味著組件只可用于一個(gè)單頁面，而是每個(gè)頁面只使用一次，這些組件永遠(yuǎn)不接受任何 prop

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

【和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名】（強(qiáng)烈推薦）

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

【組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾】（強(qiáng)烈推薦）

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

【單文件組件和字符串模板中組件名應(yīng)總是PascalCase——但在DOM模板中總是kebab-case】（強(qiáng)烈推薦）

//bad
<!-- 在單文件組件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【組件名應(yīng)該傾向于完整單詞而不是縮寫】（強(qiáng)烈推薦）

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

組件相關(guān)

【單文件組件、字符串模板和JSX中沒有內(nèi)容的組件應(yīng)該自閉合——但在DOM模板里不要這樣做】（強(qiáng)烈推薦）

自閉合組件表示它們不僅沒有內(nèi)容，而且刻意沒有內(nèi)容

//bad
<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【為組件樣式設(shè)置作用域】（必要）

這條規(guī)則只和單文件組件有關(guān)。不一定要使用 scoped 特性。設(shè)置作用域也可以通過 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>

【單文件組件應(yīng)該總是讓 <script>、<template> 和 <style> 標(biāo)簽的順序保持一致】（推薦）

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

【一個(gè)文件中只有一個(gè)組件】（強(qiáng)烈推薦）

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- TodoList.vue
|- TodoItem.vue

【組件選項(xiàng)默認(rèn)順序】（推薦）

1、副作用 (觸發(fā)組件外的影響)

el

2、全局感知 (要求組件以外的知識(shí))

name
parent

3、組件類型 (更改組件的類型)

functional

4、模板修改器 (改變模板的編譯方式)

delimiters
comments

5、模板依賴 (模板內(nèi)使用的資源)

components
directives
filters

6、組合 (向選項(xiàng)里合并屬性)

extends
mixins

7、接口 (組件的接口)

inheritAttrs
model
props/propsData

8、本地狀態(tài) (本地的響應(yīng)式屬性)

data
computed

9、事件 (通過響應(yīng)式事件觸發(fā)的回調(diào))

watch
生命周期鉤子 (按照它們被調(diào)用的順序)

10、非響應(yīng)式的屬性 (不依賴響應(yīng)系統(tǒng)的實(shí)例屬性)

methods

11、渲染 (組件輸出的聲明式描述)

template/render
renderError

prop

【Prop 定義應(yīng)該盡量詳細(xì)】（必要）

細(xì)致的 prop 定義有兩個(gè)好處： 1、它們寫明了組件的 API，所以很容易看懂組件的用法； 2、在開發(fā)環(huán)境下，如果向一個(gè)組件提供格式不正確的 prop，Vue 將會(huì)告警，以幫助你捕獲潛在的錯(cuò)誤來源

//bad
props: ['status']
//good
props: {
 status: String
}
//better
props: {
 status: {
  type: String,
  required: true
 }
}

【聲明prop時(shí)，其命名應(yīng)始終使用camelCase，而在模板和JSX中應(yīng)始終使用kebab-case】（強(qiáng)烈推薦）

//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {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 同時(shí)用在同一個(gè)元素上】（必要）

//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>

【多個(gè)特性的元素應(yīng)該分多行撰寫，每個(gè)特性一行】（強(qiáng)烈推薦）

//bad
<img src="https://vuejs.org/images/logo.png">
//good
<img
 src="https://vuejs.org/images/logo.png"
 
>

【元素特性默認(rèn)順序】（推薦）

1、定義 (提供組件的選項(xiàng))

is

2、列表渲染 (創(chuàng)建多個(gè)變化的相同元素)

v-for

3、條件渲染 (元素是否渲染/顯示)

v-if
v-else-if
v-else
v-show
v-cloak

4、渲染方式 (改變?cè)氐匿秩痉绞?

v-pre
v-once

5、全局感知 (需要超越組件的知識(shí))

id

6、唯一的特性 (需要唯一值的特性)

ref
key
slot

7、雙向綁定 (把綁定和事件結(jié)合起來)

v-model

8、其它特性 (所有普通的綁定或未綁定的特性)

9、事件 (組件事件監(jiān)聽器)

v-on

10、內(nèi)容 (復(fù)寫元素的內(nèi)容)

v-html
v-text

屬性

【私有屬性名】（必要）

在插件、混入等擴(kuò)展中始終為自定義的私有屬性使用 $_ 前綴，并附帶一個(gè)命名空間以回避和其它作者的沖突 (比如 $_yourPluginName_)

//bad
 methods: {update: function () { }}
//bad
 methods: {_update: function () { } }
//bad
 methods: {$update: function () { }}
//bad
 methods: {$_update: function () { }}
//good
 methods: { $_myGreatMixin_update: function () { }}

【組件的data必須是一個(gè)函數(shù)】（必要）

當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)

//bad
Vue.component('some-comp', {
 data: {
  foo: 'bar'
 }
})
//good
Vue.component('some-comp', {
 data: function () {
  return {
   foo: 'bar'
  }
 }
})

【組件模板應(yīng)該只包含簡(jiǎn)單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法】（強(qiáng)烈推薦）

//bad
{{
 fullName.split(' ').map(function (word) {
  return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
//good
computed: {
 normalizedFullName: function () {
  return this.fullName.split(' ').map(function (word) {
   return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
 }
}

【應(yīng)該把復(fù)雜計(jì)算屬性分割為盡可能多的更簡(jiǎn)單的屬性】（強(qiáng)烈推薦）

//bad
computed: {
 price: function () {
  var basePrice = this.manufactureCost / (1 - this.profitMargin)
  return (
   basePrice -
   basePrice * (this.discountPercent || 0)
  )
 }
}
//good
computed: {
 basePrice: function () {
  return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
  return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
  return this.basePrice - this.discount
 }
}

【當(dāng)組件開始覺得密集或難以閱讀時(shí)，在多個(gè)屬性之間添加空行可以讓其變得容易】（推薦）

//good
props: {
 value: {
  type: String,
  required: true
 },

 focused: {
  type: Boolean,
  default: false
 }
}

謹(jǐn)慎使用

1、元素選擇器應(yīng)該避免在 scoped 中出現(xiàn)

在 scoped 樣式中，類選擇器比元素選擇器更好，因?yàn)榇罅渴褂迷剡x擇器是很慢的

//bad
<style scoped>
button {
 background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
 background-color: red;
}
</style>

2、應(yīng)該優(yōu)先通過 prop 和事件進(jìn)行父子組件之間的通信，而不是 this.$parent 或改變 prop

3、應(yīng)該優(yōu)先通過 Vuex 管理全局狀態(tài)，而不是通過 this.$root 或一個(gè)全局事件總線

4、如果一組 v-if + v-else 的元素類型相同，最好使用 key (比如兩個(gè) <div> 元素)

//bad
<div v-if="error">
 錯(cuò)誤：{{ error }}
</div>
<div v-else>
 {{ results }}
</div>
//good
<div
 v-if="error"
 key="search-status"
>
 錯(cuò)誤：{{ error }}
</div>
<div 
 v-else 
 key="search-results"
>
 {{ results }}
</div>