大大提高我們的構建體驗5個 Vue 技巧

作者：Nwose Lotanna Victor
譯者：前端小智
來源：medium

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

今天，主要分享 Vue 的 5個技巧，來提高專案的構建速度。

使用可讀的命名規範

這一點你可能已經聽說過了，可讀性真的很重要，特別是多人合作的專案。以下是一些被認為是最佳做法的建議。

命名元件時使用駝峰

NewComponent.vue ✅
newcomponent.vue ?
Newcomponent.vue ?

**如果有子元件，可以這樣命名

FooterSection.vue
FooterSectionHeading.vue
FooterSectionIcons.vue
FooterSectionButton.vue

如果沒有子元件，可以嘗試加字首 the 來命名

TheNavbar.vue

驗證 Props 的資料型別

Prop 是父子元件資料通訊的重要方式，然而，重要的是，建立 Prop 時，明確指定資料型別並對傳入的資料進行驗證，可以幫助避免我們在開發階段由於型別不一致導致的 Bug。

我們新手可能時不時會經常這樣寫 prop:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每個 prop 都有指定的值型別。這時，你可以以物件形式列出 prop，這些 property 的名稱和值分別是 prop 各自的名稱和型別：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

這不僅為你的元件提供了文件，還會在它們遇到錯誤的型別時從瀏覽器的 JavaScript 控制檯提示使用者。

不要直接操作DOM

從早期用 JQ 過來的同學，在用 Vue 時有部分人還是很喜歡直接操作DOM，這並不是壞事，不過 Vue 使用虛擬DOM，這是一個抽象的DOM版本，使編譯更有效，避免在每次變化時重新渲染整個DOM。這一點在很大程度上提高了效率和資源管理，因為DOM API被呼叫的頻率較低。這意味著，我們並不真的需要在元件中做這樣的事情。

<input type="checkbox" @change="logStatus" />

如果要根據上面的 checkbox 狀態做一些事情，我們可能會這樣做：

methods: {
  logStatus() {
    const isOn = document.getElementById('thecheckbox').checked;
    if( isOn ) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
  }
}

getElement 是DOM API，如果用下面這種方式來代替，效率會提高。

data() {
  return {
    isOn = false
  }
},
methods: {
  logStatus() {
    if(this.isOn) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
    this.isOn = !this.isOn;
  }
}

不需要用 DOM API，這也可以達到同樣的效果。無論你能用純JS做什麼，都有可能在虛擬DOM中找到更有效的方法，如果你找不到，請使用 Vue Refs。

擁抱計算屬性

計算屬性是減少複雜邏輯的一個很好的方式，比如，在我們的條件表示式很長的時候就很可以用計算屬性，簡化成一個變數，可以大大的提高可讀性，也避免給後面維護的人留坑。

<div v-for=’car in cars’ v-if=’car.country =="Germany"' >

我們可以使用v-for來迴圈瀏覽列表，有些人會像上面那樣使用 v-if 來做條件或過濾。這看起來不錯，但是，Vue的編譯器優先考慮 v-for 而不是 v-if，所以最後的結果可能不是我們想要的，列表（想象它有100萬個）將被每次迴圈，這樣一點都不高效，我們可以使用計算屬性改善這一問題。

<div v-for='car in countryFilter'>
//....
computed: {
  countryFilter: () => {
    return this.cars.filter(function (car) {
      return car.country =="Germany"
    })
  }
}

這種迴圈效率更高，計算的屬性也只被執行一次，只有依賴的變數變化時才會再次執行。最後，它把邏輯從模板部分分離出來，這樣我們的程式碼就更乾淨和可讀。