天天看點
傳回

12個面向專業開發人員的VueJS最佳實踐

12個面向專業開發人員的VueJS最佳實踐

英文 | https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/

翻譯 | 小愛

随着 VueJS的使用變得越來越普遍，出現了一些最佳實踐與開發小技巧。 

在本文中，我将與你分享12個非常棒的開發技巧。

希望這些最佳實踐可以幫助你編寫更好的 VueJS 代碼。這不僅會讓你的所有開發人員同僚都喜歡你，而且會讓你的生活變得更輕松。

好了，介紹不多說了。讓我們直接開始吧。  

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

使用帶有 v-for指令的 key 屬性可以幫助你的應用程式在你想要操作資料時保持不變和可預測性。

這是必要的，以便 Vue 可以跟蹤你的元件狀态以及對不同元素的持續引用。它非常有用的一個例子是在使用動畫或Vue 轉換時。 

沒有鍵，Vue 隻會嘗試使 DOM 盡可能高效。這可能意味着 v-for 中的元素可能會出現亂序，或者它們的行為将不太可預測。如果我們對每個元素都有一個唯一的鍵引用，那麼我們可以更好地預測我們的 Vue 應用程式将如何處理 DOM 操作。

<!-- BAD -->
<div v-for='product in products'>  </div>


<!-- GOOD! -->
<div v-for='product in products' :key='product.id'>

2、使用 kebab-case 舉辦活動

在發出自定義事件時，最好使用 kebab-case。這是因為在父元件中，這與我們用來偵聽該事件的文法相同。 

是以，為了在我們的元件之間保持一緻性，并使你的代碼更具可讀性，請堅持在兩個地方使用 kebab-case。 

//彈出視窗.vue
this.$emit('close-window')      
// 父元件.vue
<popup-window @close-window='handleEvent()' />

3、 使用camelCase 聲明props 并在模闆中使用kebab-case

這種最佳實踐隻是遵循每種語言的約定。在 Javascript 中，camelCase 是标準，而在 HTML 中，它是 kebab-case ，是以，我們相應地使用它們。

對我們來說幸運的是，VueJS 為我們在 kebab-case 和 camelCase 之間轉換，是以除了實際聲明它們之外，我們不必擔心任何事情。 

在 Javascript 中，camelCase 是标準，而在 HTML 中，它是 kebab-case ，是以，我們相應地使用它們。

//不好的
<PopupWindow titleText='hello world' />


props: {
  'title-text': String
}      
//好的
<PopupWindow title-text='hello world' />


props: {
  titleText: String
}

4、資料應該總是傳回一個函數

聲明元件資料時，資料選項應始終傳回一個函數。如果沒有，我們隻是簡單地傳回一個對象，那麼該資料将在元件的所有執行個體之間共享。

//不好的
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'
>

問題在于 VueJS 将 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驗證即可。

從 Vue 文檔中檢視此示例。

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

7、元件使用 PascalCase 或 kebab-case

元件的常見命名約定是使用 PascalCase 或 kebab-case。無論你為項目選擇哪一個，最重要的是始終保持一緻。 

PascalCase 效果最好，因為大多數 IDE 自動完成功能都支援它。 

# BAD


mycomponent.vue
myComponent.vue
Mycomponent.vue


# GOOD


MyComponent.vue

8、基礎元件應該有相應的字首

另一個命名約定專注于命名基礎元件——或者純粹展示的元件，并幫助在你的應用程式中設定通用樣式。 

根據 Vue 風格指南，基礎元件是隻包含…

  • HTML 元素
  • 附加基礎元件
  • 第 3 方 UI 元件

命名這些元件的最佳做法是給它們字首“Base”、“V”或“App”。再說一次，隻要你在整個項目中保持一緻，就可以使用其中任何一個。 

BaseButton.vue
BaseIcon.vue
BaseHeading.vue

此命名約定的目的是将基本元件保持在檔案系統中。此外，使用 webpack 導入功能，你可以搜尋與你的命名約定模式比對的元件，并在你的 Vue 項目中自動将它們作為全局變量導入。 

9、聲明和使用 ONCE 的元件應該有字首“The”

與基礎元件類似，單執行個體元件（每頁使用一次且不接受 props）有自己的命名約定。

這些元件特定于你的應用程式，通常是頁眉、側邊欄或頁腳等内容。 

該元件應該隻有一個活動執行個體。

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

10、與你的指令速記保持一緻

Vue 開發人員的常用技術是使用指令的簡寫。例如，

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

在你的 Vue 項目中使用這些技巧非常棒。但是要在你的項目中建立某種約定，你應該始終使用它們或從不使用它們。這将使你的項目更具凝聚力和可讀性。 

11、不要在 created AND watch 上調用方法

Vue 開發人員犯的一個常見錯誤（或者可能隻是我）是他們不必要地調用了 created 和 watch 中的方法。這背後的想法是我們希望在元件初始化後立即運作 watch hook。 

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

然而，Vue 有一個内置的解決方案。這是我們經常忘記的 Vue watchers的一個屬性。

我們所要做的就是稍微重構我們的Vue watchers并聲明兩個屬性： 

  1. handler (newVal, oldVal) – 這是我們的觀察者方法本身
  2. 立即：true - 這使我們的處理程式在我們的執行個體建立時運作 
//好的
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property {
    immediate: true
    handler() {
      this.handleChange()
    }
  }
}

12、模闆表達式應該隻有基本的Javascript表達式

想要在模闆中添加盡可能多的内聯功能是很自然的事情。但這使我們的模闆聲明性更少且更複雜。這意味着我們的模闆變得非常混亂。

為此，讓我們檢視 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 代碼更易于維護、可讀和更專業。 

希望這些技巧對你有用（因為它們絕對是你我一直想記住的東西）。

感謝你的閱讀，祝程式設計愉快！

學習更多技能

請點選下方公衆号

​

命名約定 資料 最佳實踐
上一篇: 5個程式員也應該掌握的網頁設計技能
下一篇: Android Activit生命周期方法

繼續閱讀