12 種使用 Vue 的最佳作法

時間 2020-08-11

標籤使用 vue 最佳作法简体版

原文原文鏈接

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

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

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

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

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

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

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

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

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

在事件中使用短橫線命名

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

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

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

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

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

幸運的是，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: []
}

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

// 好的作法
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方法自己。

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