12 種使用 Vue 的最佳作法

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

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

隨着 VueJS 的使用愈來愈普遍，出現了幾種最佳實踐並逐漸成爲標準。在本文中，主要分享在平時開發中一些有用資源和技巧，廢話少說，咱們開始吧。

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

在須要操縱數據時，將key屬性與v-for指令一塊兒使用可讓程序保持恆定且可預測。

這是頗有必要的，這樣Vue就能夠跟蹤組件狀態，並對不一樣的元素有一個常量引用。在使用動畫或Vue轉換時，key 很是有用。

若是沒有key ，Vue只會嘗試使DOM儘量高效。 這可能意味着v-for中的元素可能會出現亂序，或者它們的行爲難以預測。 若是咱們對每一個元素都有惟一的鍵引用，那麼咱們能夠更好地預測Vue應用程序將如何精確地處理DOM操做。

<!-- 很差的作法-->
<div v-for='product in products'>  </div>

<!-- 好的作法 -->
<div v-for='product in products' :key='product.id'>
複製代碼

在事件中使用短橫線命名

在發出定製事件時，最好使用短橫線命名，這是由於在父組件中，咱們使用相同的語法來偵聽該事件。

所以，爲了確保咱們各組件之間的一致性，並使您的代碼更具可讀性，請在兩個地方都堅持使用短橫線命名。

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

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

最佳作法只是遵循每種語言的約定。 在 JS 中，駝峯式聲明是標準，在HTML中，是短橫線命名。 所以，咱們相應地使用它們。

幸運的是，Vue 已經提供了駝峯式聲明和短橫線命名之間轉換，所以除了實際聲明它們以外，咱們沒必要擔憂任何事情。

// 很差的作法
<PopupWindow titleText='hello world' /> 
props: { 'title-text': String }

// 好的作法
<PopupWindow title-text='hello world' /> 
props: { titleText: String }
複製代碼

4.data 應始終返回一個函數

聲明組件data時，data選項應始終返回一個函數。 若是返回的是一個對象，那麼該data將在組件的全部實例之間共享。

// 很差的作法
data: {
  name: 'My Window',
  articles: []
}
複製代碼

可是，大多數狀況下，咱們的目標是構建可重用的組件，所以咱們但願每一個組件返回一個唯一的對象。咱們經過在函數中返回數據對象來實現這一點。

// 好的作法
data () {
  return {
    name: 'My Window',
    articles: []
  }
}
複製代碼

5. 不要在同個元素上同時使用v-if和v-for指令

爲了過濾數組中的元素，咱們很容易將v-if與v-for在同個元素同時使用。

// 很差的作法
<div v-for='product in products' v-if='product.price < 500'>
複製代碼

問題是在 Vue 優先使用v-for指令，而不是v-if指令。它循環遍歷每一個元素，而後檢查v-if條件。

this.products.map(function (product) {
  if (product.price < 500) {
    return product
  }
})
複製代碼

這意味着，即便咱們只想渲染列表中的幾個元素，也必須遍歷整個數組。

這對咱們來固然沒有任何好處。

一個更聰明的解決方案是遍歷一個計算屬性，能夠把上面的例子重構成下面這樣的：

<div v-for='product in cheapProducts'>
 
computed: {
  cheapProducts: () => {
    return this.products.filter(function (product) {
      return product.price < 100
    })
  }
}
複製代碼

這麼作有幾個好處：

• 渲染效率更高，由於咱們不會遍歷全部元素

• 僅當依賴項更改時，纔會重使用過濾後的列表

• 這寫法有助於將組件邏輯從模板中分離出來，使組件更具可讀性

6.用正確的定義驗證咱們的 props

能夠這條是很重要，爲何？

在設計大型項目時，很容易忘記用於props的確切格式、類型和其餘約定。若是你在一個更大的開發團隊中，你的同事不會讀心術，因此你要清楚地告訴他們如何使用你的組件。

所以，咱們只需編寫props驗證便可，沒必要費力地跟蹤組件來肯定props的格式

從Vue文檔中查看此示例。

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

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

組件的通用命名約定是使用駝峯或短橫線。不管咱們使用哪咱，最重要的是始終保持一致。我認爲駝峯方式 效果最好，由於大多數IDE自動完成功能都支持它。

# 很差的作法

mycomponent.vue
myComponent.vue
Mycomponent.vue

# 好作法

MyComponent.vue
複製代碼

8. 基本組件應該相應地加上前綴

根據Vue樣式指南，基本組件是僅包含如下內容的組件：

• HTML 元素
• 額外的基礎組件
• 第三方的UI組件

爲這些組件命名的最佳實踐是爲它們提供前綴Base、V或App。一樣，只要咱們在整個項目中保持一致，可使用其中任何一種。

BaseButton.vue
BaseIcon.vue
BaseHeading.vue
複製代碼

該命名約定的目的是使基本組件按字母順序分組在文件系統中。 另外，經過使用webpack導入功能，咱們能夠搜索與命名約定模式匹配的組件，並將全部組件自動導入爲Vue項目中的全局變量。

單實例組件命名應該帶有前綴 The

與基本組件相似，單實例組件(每一個頁面使用一次，不接受任何prop)應該有本身的命名約定。這些組件特定於咱們的應用，一般是 footer，header或sider。

該組件只能有一個激活實例。

TheHeader.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue
複製代碼

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

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

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

在你的Vue項目中使用這些縮寫是很好的。可是要在整個項目中建立某種約定，老是使用它們或從不使用它們,會使咱們的項目更具內聚性和可讀性。

11.不要在「created」和「watch」中調用方法

Vue開發人員常常犯的一個錯誤是他們沒必要要地在created和watch中調用方法。 其背後的想法是，咱們但願在組件初始化後當即運行watch。

// 很差的作法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }

可是，Vue爲此提供了內置的解決方案，這是咱們常常忘記的Vue watch屬性。

咱們要作的就是稍微重組watch並聲明兩個屬性：

1.handler (newVal, oldVal)-這是咱們的watch方法自己。 2. immediate: true- 表明若是在 wacth 裏聲明瞭以後，就會當即先去執行裏面的handler方法，若是爲 false就跟咱們之前的效果同樣，不會在綁定的時候就執行

// 好的作法
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property {
    immediate: true
    handler() {
      this.handleChange()
    }
  }
}
複製代碼

12. 模板表達式應該只有基本的 JS 表達式

在模板中添加儘量多的內聯功能是很天然的。可是這使得咱們的模板不那麼具備聲明性，並且更加複雜，也讓模板會變得很是混亂。

爲此，讓咱們看看Vue樣式指南中另外一個規範化字符串的示例，看看它有多混亂。

//很差的作法
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
複製代碼

基本上，咱們但願模板中的全部內容都直觀明瞭。 爲了保持這一點，咱們應該將複雜的表達式重構爲適當命名的組件選項。

分離複雜表達式的另外一個好處是能夠重用這些值。

// 好的作法
{{ 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(' ')
  }
}
複製代碼

總結

這是12個最多見的最佳實踐，它們將使咱們的Vue代碼更易於維護、可讀性更好、更專業。但願這些技巧對您有用（由於它們絕對是我一直想記住的東西）。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：medium.com/better-prog…

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。