作者：Matt Maribojoc 譯者：前端小智 來源：medium

隨著 VueJS 的使用越來越廣泛，出現(xiàn)了幾種最佳實(shí)踐并逐漸成為標(biāo)準(zhǔn)。在本文中，主要分享在平時(shí)開發(fā)中一些有用資源和技巧，廢話少說，我們開始吧。

1.始終在 v-for 中使用 :key

在需要操縱數(shù)據(jù)時(shí)，將key屬性與v-for指令一起使用可以讓程序保持恒定且可預(yù)測。

這是很有必要的，這樣Vue就可以跟蹤組件狀態(tài)，并對(duì)不同的元素有一個(gè)常量引用。在使用動(dòng)畫或Vue轉(zhuǎn)換時(shí)，key 非常有用。

如果沒有key ，Vue只會(huì)嘗試使DOM盡可能高效。 這可能意味著v-for中的元素可能會(huì)出現(xiàn)亂序，或者它們的行為難以預(yù)測。 如果我們對(duì)每個(gè)元素都有唯一的鍵引用，那么我們可以更好地預(yù)測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件中，我們使用相同的語法來偵聽該事件。

因此，為了確保我們各組件之間的一致性，并使您的代碼更具可讀性，請(qǐng)?jiān)趦蓚€(gè)地方都堅(jiān)持使用短橫線命名。

this.$emit('close-window')
// 在父組件中
<popup-window @close-window='handleEvent()' />

3.使用駝峰式聲明 props，并在模板中使用短橫線命名來訪問 props

最佳做法只是遵循每種語言的約定。 在 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ì)象。我們通過在函數(shù)中返回?cái)?shù)據(jù)對(duì)象來實(shí)現(xiàn)這一點(diǎn)。

// 好的做法
data () {
 return {
  name: 'My Window',
  articles: []
 }
}

5. 不要在同個(gè)元素上同時(shí)使用v-if和v-for指令

為了過濾數(shù)組中的元素，我們很容易將v-if與v-for在同個(gè)元素同時(shí)使用。

// 不好的做法
<div v-for='product in products' v-if='product.price < 500'>

問題是在 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ì)我們來當(dāng)然沒有任何好處。

一個(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)依賴項(xiàng)更改時(shí)，才會(huì)重使用過濾后的列表
• 這寫法有助于將組件邏輯從模板中分離出來，使組件更具可讀性

6.用正確的定義驗(yàn)證我們的 props

可以這條是很重要，為什么？

在設(shè)計(jì)大型項(xiàng)目時(shí)，很容易忘記用于props的確切格式、類型和其他約定。如果你在一個(gè)更大的開發(fā)團(tuán)隊(duì)中，你的同事不會(huì)讀心術(shù)，所以你要清楚地告訴他們?nèi)绾问褂媚愕慕M件。

因此，我們只需編寫props驗(yàn)證即可，不必費(fèi)力地跟蹤組件來確定props的格式

從Vue文檔中查看此示例。

props: {
 status: {
  type: String,
  required: true,
  validator: function (value) {
   return [
    'syncing',
    'synced',
    'version-conflict',
    'error'
   ].indexOf(value) !== -1
  }
 }
}

7.組件全名使用駝峰或或者短橫線

組件的通用命名約定是使用駝峰或短橫線。無論我們使用哪咱，最重要的是始終保持一致。我認(rèn)為駝峰方式 效果最好，因?yàn)榇蠖鄶?shù)IDE自動(dòng)完成功能都支持它。

# 不好的做法
mycomponent.vue
myComponent.vue
Mycomponent.vue

# 好做法
MyComponent.vue

8. 基本組件應(yīng)該相應(yīng)地加上前綴

根據(jù)Vue樣式指南，基本組件是僅包含以下內(nèi)容的組件：

• HTML 元素
• 額外的基礎(chǔ)組件
• 第三方的UI組件

為這些組件命名的最佳實(shí)踐是為它們提供前綴Base、V或App。同樣，只要我們?cè)谡麄€(gè)項(xiàng)目中保持一致，可以使用其中任何一種。

BaseButton.vue
BaseIcon.vue
BaseHeading.vue

該命名約定的目的是使基本組件按字母順序分組在文件系統(tǒng)中。 另外，通過使用webpack導(dǎo)入功能，我們可以搜索與命名約定模式匹配的組件，并將所有組件自動(dòng)導(dǎo)入為Vue項(xiàng)目中的全局變量。

單實(shí)例組件命名應(yīng)該帶有前綴 The

與基本組件類似，單實(shí)例組件(每個(gè)頁面使用一次，不接受任何prop)應(yīng)該有自己的命名約定。這些組件特定于我們的應(yīng)用，通常是 footer，header或sider。

該組件只能有一個(gè)激活實(shí)例。

TheHeader.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue

10.保持指令簡寫的一致性

在Vue開發(fā)人員中，一種常見的技術(shù)是使用指令的簡寫。例如：

• @是v-on的簡寫
• : 是 v-bind 的簡寫
• # 是 v-slot 的簡寫

在你的Vue項(xiàng)目中使用這些縮寫是很好的。但是要在整個(gè)項(xiàng)目中創(chuàng)建某種約定，總是使用它們或從不使用它們,會(huì)使我們的項(xiàng)目更具內(nèi)聚性和可讀性。

11.不要在“created”和“watch”中調(diào)用方法

Vue開發(fā)人員經(jīng)常犯的一個(gè)錯(cuò)誤是他們不必要地在created和watch中調(diào)用方法。 其背后的想法是，我們希望在組件初始化后立即運(yùn)行watch。

// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }

但是，Vue為此提供了內(nèi)置的解決方案，這是我們經(jīng)常忘記的Vue watch屬性。

我們要做的就是稍微重組watch并聲明兩個(gè)屬性：

1.handler (newVal, oldVal)-這是我們的watch方法本身。 2. immediate: true- 代表如果在 wacth 里聲明了之后，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會(huì)在綁定的時(shí)候就執(zhí)行

// 好的做法
methods: {
 handleChange() {
  // stuff happens
 }
},
watch () {
 property {
  immediate: true
  handler() {
   this.handleChange()
  }
 }
}

12. 模板表達(dá)式應(yīng)該只有基本的 JS 表達(dá)式

在模板中添加盡可能多的內(nèi)聯(lián)功能是很自然的。但是這使得我們的模板不那么具有聲明性，而且更加復(fù)雜，也讓模板會(huì)變得非?；靵y。

為此，讓我們看看Vue樣式指南中另一個(gè)規(guī)范化字符串的示例，看看它有多混亂。

//不好的做法
{{
 fullName.split(' ').map(function (word) {
  return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}

基本上，我們希望模板中的所有內(nèi)容都直觀明了。 為了保持這一點(diǎn)，我們應(yīng)該將復(fù)雜的表達(dá)式重構(gòu)為適當(dāng)命名的組件選項(xiàng)。

分離復(fù)雜表達(dá)式的另一個(gè)好處是可以重用這些值。

// 好的做法
{{ normalizedFullName }}


// The complex expression has been moved to a computed property
computed: {
 normalizedFullName: function () {
  return this.fullName.split(' ').map(function (word) {
   return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
 }
}

總結(jié)

這是12個(gè)最常見的最佳實(shí)踐，它們將使我們的Vue代碼更易于維護(hù)、可讀性更好、更專業(yè)。希望這些技巧對(duì)您有用（因?yàn)樗鼈兘^對(duì)是我一直想記住的東西）。

到此這篇關(guān)于12 種使用Vue 的最佳做法的文章就介紹到這了,更多相關(guān)Vue 最佳做法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論