在前兩篇提及的Vue Style Guide是比較重要的項目，而這篇會所建議的是依個人習慣做的推薦，依照自己喜好即可~

優先度C & D

component & instance options換行

• 當Component變得密集或難以閱讀時，在多個property之間換行，可以提高可讀性。

E.G.
props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
},

computed: {
  formattedValue: function () {
    // ...
  },

  inputClasses: function () {
    // ...
  }
}

// 即使這樣，Component options沒有換行也沒關係，還是可以很清楚的閱讀程式碼
props: {
  value: {
    type: String,
    required: true
  },
  focused: {
    type: Boolean,
    default: false
  },
  label: String,
  icon: String
},
computed: {
  formattedValue: function () {
    // ...
  },
  inputClasses: function () {
    // ...
  }
}

單一component元素排序

• 單一component對script、template、style標籤保持一致性
• 最後一個固定為style

E.G.
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

Vue官網建議的Component/instance options order、Element attribute order，不在這裡多述。 (官網已經寫得很清楚了QQ)

v-if/v-else-if/v-else 沒有用 key

• 如果v-if和v-else的元素類型相同，最好用key (e.g. 兩個<div>元素)
• 預設情況下，Vue會盡量高效的更新DOM。因此相同類型的元素之間在切換時，會更新現有的元素，而不是刪除後在建立新元素。
• 使用key可方便管理元素，在頁面上能快速重新渲染元素。

E.G.
<div
  v-if="error"
  key="search-status"
>

  Error: {{ error }}
</div>

<div
  v-else
  key="search-results"
>
  {{ results }}
</div>

有範圍的Element selectors

• Element selectors應該避免在scoped中出现
• 在scoped樣式中，Class selectors比Element selectors好用，因為大量使用Element selectors會很慢。

Bad Smell
E.G. 
<template>
  <button>X</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>

Good Smell
E.G.
<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>

父子元件溝通

• 父子元件溝通，最好是透過Props、events 傳遞，而非用this.$parent/變更props。
• 一般來說，應該用prop向內傳遞，事件向外傳遞，遵循這個規則才會讓元件容易理解。但是某些情況，變更props或this.$parent可以簡化兩個複雜耦合性的元件。
• 在元件沒有複雜雜耦的情況，不要為了一時之便(少寫code)而犧牲系統流程的可讀性。

E.G.
use.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <input
      :value="todo.text"
      @input="$emit('input', $event.target.value)"
    >
  `
})

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <span>
      {{ todo.text }}
      <button @click="$emit('delete')">
        X
      </button>
    </span>
  `
})

Vue Style Guide到這裡告一段落，中場休息結束! 下一篇即將回歸Vue API - nextTick