1.始終在v-for中使用:key
在需要操縱數(shù)據(jù)時(shí)，將key屬性與v-for指令一起使用可以讓程序保持恒定且可預(yù)測(cè)。
這是很有必要的，這樣Vue就可以跟蹤組件狀態(tài)，并對(duì)不同的元素有一個(gè)常量引用。在使用動(dòng)畫(huà)或Vue轉(zhuǎn)換時(shí)，key 非常有用。
如果沒(méi)有key，Vue只會(huì)嘗試使DOM盡可能高效。 這可能意味著v-for中的元素可能會(huì)出現(xiàn)亂序，或者它們的行為難以預(yù)測(cè)。 如果我們對(duì)每個(gè)元素都有唯一的鍵引用，那么我們可以更好地預(yù)測(cè)Vue應(yīng)用程序?qū)⑷绾尉_地處理DOM操作。
<!-- 不好的做法-->
<div v-for='product in products'>? </div>
<!-- 好的做法 -->
<div v-for='product in products' :key='product.id'>
2.在事件中使用短橫線命名
在發(fā)出定制事件時(shí)，最好使用短橫線命名，這是因?yàn)樵诟附M件中，我們使用相同的語(yǔ)法來(lái)偵聽(tīng)該事件。
因此，為了確保我們各組件之間的一致性，并使您的代碼更具可讀性，請(qǐng)?jiān)趦蓚€(gè)地方都堅(jiān)持使用短橫線命名。
this.$emit('close-window')
// 在父組件中
<popup-window @close-window='handleEvent()' />
3.使用駝峰式聲明 props，并在模板中使用短橫線命名來(lái)訪問(wèn) props
最佳做法只是遵循每種語(yǔ)言的約定。 在 JS 中，駝峰式聲明是標(biāo)準(zhǔn)，在HTML中，是短橫線命名。 因此，我們相應(yīng)地使用它們。
幸運(yùn)的是，Vue 已經(jīng)提供了駝峰式聲明和短橫線命名之間轉(zhuǎn)換，因此除了實(shí)際聲明它們之外，我們不必?fù)?dān)心任何事情。
// 不好的做法
<PopupWindow titleText='hello world' />
props: { 'title-text': String }
// 好的做法
<PopupWindow title-text='hello world' />
props: { titleText: String }
4.data 應(yīng)始終返回一個(gè)函數(shù)
聲明組件data時(shí)，data選項(xiàng)應(yīng)始終返回一個(gè)函數(shù)。 如果返回的是一個(gè)對(duì)象，那么該data將在組件的所有實(shí)例之間共享。
// 不好的做法
data: {
? name: 'My Window',
? articles: []
}
但是，大多數(shù)情況下，我們的目標(biāo)是構(gòu)建可重用的組件，因此我們希望每個(gè)組件返回一個(gè)惟一的對(duì)象。我們通過(guò)在函數(shù)中返回?cái)?shù)據(jù)對(duì)象來(lái)實(shí)現(xiàn)這一點(diǎn)。
// 好的做法
data () {
? return {
? ? name: 'My Window',
? ? articles: []
? }
}
5. 不要在同個(gè)元素上同時(shí)使用v-if和v-for指令
為了過(guò)濾數(shù)組中的元素，我們很容易將v-if與v-for在同個(gè)元素同時(shí)使用。
// 不好的做法
<div v-for='product in products' v-if='product.price < 500'>
問(wèn)題是在 Vue 優(yōu)先使用v-for指令，而不是v-if指令。它循環(huán)遍歷每個(gè)元素，然后檢查v-if條件。
this.products.map(function (product) {
? if (product.price < 500) {
? ? return product
? }
})
這意味著，即使我們只想渲染列表中的幾個(gè)元素，也必須遍歷整個(gè)數(shù)組。
這對(duì)我們來(lái)當(dāng)然沒(méi)有任何好處。
一個(gè)更聰明的解決方案是遍歷一個(gè)計(jì)算屬性，可以把上面的例子重構(gòu)成下面這樣的：
<div v-for='product in cheapProducts'>
computed: {
? cheapProducts: () => {
? ? return this.products.filter(function (product) {
? ? ? return product.price < 100
? ? })
? }
}
這么做有幾個(gè)好處：
渲染效率更高，因?yàn)槲覀儾粫?huì)遍歷所有元素
僅當(dāng)依賴(lài)項(xiàng)更改時(shí)，才會(huì)重使用過(guò)濾后的列表
這寫(xiě)法有助于將組件邏輯從模板中分離出來(lái)，使組件更具可讀性
6.用正確的定義驗(yàn)證我們的 props
可以這條是很重要，為什么？
在設(shè)計(jì)大型項(xiàng)目時(shí)，很容易忘記用于props的確切格式、類(lèi)型和其他約定。如果你在一個(gè)更大的開(kāi)發(fā)團(tuán)隊(duì)中，你的同事不會(huì)讀心術(shù)，所以你要清楚地告訴他們?nèi)绾问褂媚愕慕M件。
因此，我們只需編寫(xiě)props驗(yàn)證即可，不必費(fèi)力地跟蹤組件來(lái)確定props的格式
從Vue文檔中查看此示例。
props: {
? status: {
? ? type: String,
? ? required: true,
? ? validator: function (value) {
? ? ? return [
? ? ? ? 'syncing',
? ? ? ? 'synced',
? ? ? ? 'version-conflict',
? ? ? ? 'error'
? ? ? ].indexOf(value) !== -1
? ? }
? }
}
7.組件全名使用駝峰或或者短橫線
組件的通用命名約定是使用駝峰或短橫線。無(wú)論我們使用哪咱，最重要的是始終保持一致。我認(rèn)為駝峰方式 效果最好，因?yàn)榇蠖鄶?shù)IDE自動(dòng)完成功能都支持它。
# 不好的做法
mycomponent.vue
myComponent.vue
Mycomponent.vue
# 好做法
MyComponent.vue
