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"
    })
  }
}           

這種循環效率更高，計算的屬性也隻被執行一次，隻有依賴的變量變化時才會再次執行。最後，它把邏輯從模闆部分分離出來，這樣我們的代碼就更幹淨和可讀。

如果你想開發小程式或者了解更多小程式的内容，可以通過第三方專業開發平台，來幫助你實作開發需求：

廈門在乎科技

-專注

廈門小程式開發公司

、app開發、網站開發、h5小遊戲開發