Vue精簡版風格程式碼分享

Vue官網的風格指南依照優先順序（依序為必要、強烈建議、推薦、謹慎使用）分類，且程式碼間隔較大，不易查詢。本文依照類型分類，並對部分範例或解釋進行縮減，是Vue風格指南的精簡版，本文主要介紹了Vue精簡版風格指南的相關資料，包括組件名稱，指令及特徵,需要的朋友可以參考下，希望能幫助大家。

元件名稱

【元件名為多個單字】（必要）

元件名稱應該永遠是多個單字的，根元件 App 除外。 這樣做可以避免跟現有的以及未來的HTML 元素相衝突，因為所有的HTML 元素名稱都是單字的

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

【單檔案元件檔案名稱應該要麼始終是單字大寫開頭(PascalCase) ，要么始終橫線連接(kebab-case)】（強烈推薦）

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

【基礎組件名要有一個特定前綴開頭】（強烈建議）

應用特定樣式和約定的基礎元件(也就是展示類別的、無邏輯的或無狀態的元件) 應該全部以一個特定的前綴開頭，例如Base、App 或V

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

【只應該擁有單一活躍實例的元件應該以The 前綴命名，以示其唯一性】（強烈建議）

這不意味著元件只可用於一個單頁面，而是每個頁面只使用一次，這些元件永遠不接受任何prop

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

【和父元件緊密耦合的子元件應該以父元件名稱作為前綴命名】（強烈推薦）

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

【元件名稱應該以高階的(通常是一般化描述的) 單字開頭，以描述性的修飾字結尾】（強烈推薦）

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

【單一檔案元件和字串範本中元件名應總是PascalCase－但在DOM範本中總是kebab-case 】（強烈建議）

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent></mycomponent>
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<mycomponent></mycomponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【元件名稱應該傾向於完整單字而不是縮寫】（強烈建議）

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

元件相關

【單一檔案元件、字串模板和JSX中沒有內容的元件應該自閉合－但在DOM模板裡不要這樣做】（強烈建議）

自閉合元件表示它們不僅沒有內容，而且刻意沒有內容

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【為元件樣式設定作用域】（必要）

這條規則只和單一檔案元件有關。 不一定 要使用  scoped 特性。設定作用域也可以透過CSS Modules，或使用其它的函式庫或約定

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

【單一檔案元件應該總是讓<script>、<template> 和<style> 標籤的順序保持一致】（建議）</script>

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

【一個檔案中只有一個元件】（強烈建議）

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- 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 將會告警，以幫助你捕捉潛在的錯誤來源

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

【聲明prop時，其命名應始終使用camelCase，而在模板和JSX中應始終使用kebab-case】（強烈建議）

//bad
props: {'greeting-text': String}
<welcomemessage></welcomemessage>
//good
props: {greetingText: String}
<welcomemessage></welcomemessage>

指令及特性

【總是用key 配合v-for】（必要）

//bad
 

//good  

【不要把v- if 和v-for 同時用在同一個元素上】（必要）

//bad

 {{ user.name }} 

//good

 {{ user.name }} 

【多個特性的元素應該分多行撰寫，每個特性一行】（強烈建議）

//bad
<img  src="/static/imghwm/default1.png" data-src="https://vuejs.org/images/logo.png" class="lazy" alt="Vue精簡版風格程式碼分享" >
//good
<img  src="/static/imghwm/default1.png" data-src="https://vuejs.org/images/logo.png" class="lazy" alt="Vue精簡版風格程式碼分享" >

【元素特性預設順序】（建議）

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 外的任何地方)，它的值必须是返回一个对象的函数

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

【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

//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(' ')
 }
}

【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

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

【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

//good
props: {
 value: {
 type: String,
 required: true
 },
 focused: {
 type: Boolean,
 default: false
 }
}

谨慎使用

1、元素选择器应该避免在 scoped 中出现

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

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

2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop

3、应该优先通过 Vuex 管理全局状态，而不是通过  this.$root 或一个全局事件总线

4、如果一组 v-if +  v-else 的元素类型相同，最好使用  key (比如两个 

元素)

//bad
<p>
 错误：{{ error }}
</p>
<p>
 {{ results }}
</p>
//good
<p>
 错误：{{ error }}
</p>
<p>
 {{ results }}
</p>

相关推荐：

vue如何实现前进刷新后退不刷新

值得收藏的vue开发技巧实例

Vue header组件开发实例代码

以上是Vue精簡版風格程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！