寫作規範(Coding guideline)

組件數據必須是函數

當在組件中使用data property的時候(除了new Vue外的任何地方)，它的值必須是返回一個對象的函數。

Vue.component('todo-List',{
    data () {
        return{
            foo: 'bar'
        }
    }
})
// or 
export dafault {
    name: 'todo-List',
    data () {
        return{
            foo: 'bar'
        }
    }
}

Props 定義應該盡量詳細

props 的定義應該盡量詳細，至少需要指定其類型，更好有其默認值、自定義的驗證函數、是否為必要。

...
props: {
    status: {
        type: Boolean,
        default: false,
        required: true
    }
}
...

總是用 key 配合 v-for，避免v-if和v-for用在一起

我們在v-for遍例元素時，總是必須用Key配合v-for，以便維護內部元件及其子樹的狀態。
避免v-if和v-for用在同一元素上是因為v-for比v-if具有更高的優先級，在渲染時會先遍例元素才來條件渲染。
重新渲染時為了更好的效能，你可以參考如下，先條件渲染在遍例元素。

<ul v-if="isActive">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
// or...
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
...
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

模板（template）每個屬性單獨一行

多個 attribute 的元素應該分多行撰寫，每個 attribute 一行，因為這樣更易讀。

<b-pagination
    v-model="currentPage"
    :total-rows="totalRows"
    :per-page="perPage"
    align="fill"
    size="sm"
    class="my-0"
  ></b-pagination>

模板（template）中簡單的表達式

組件模板應該只包含簡單的表達式，複雜的表達式則應該重構為計算屬性或方法。

<ul>
  <li data-title="性別">
    {{ gender }}
  </li>
  <li data-title="測驗開始日期">
    {{ toLocaleDateString(applicantInfo.examStart) }}
  </li>
</ul>
...
methods: {
    toLocaleDateString (str) {
      const date = new Date(str)
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      if (isNaN(date.getTime())) {
        return '-'
      }
      return date.toLocaleDateString(undefined, options)
    }
},
computed: {
    gender () {
        return this.applicantInfo.gender === 1 ? '男' : '女'
    }
}
...

模板（template）中指令縮寫

你可以不縮寫，也可以縮寫，但請統一一種寫寫作方式，用 : 表示v-bind:，用 @ 表示v-on:，用 #表示v-slot:

<button :disabled="isDisable"
        @change="onSubmit">
    <template #text>
        <span>提交</span>
    </template>
</button>

模板（template）中attribute 值帶引號

在HTML中不帶空格的attribute值是可以沒有引號的，但是這種做法通常會導致因避免使用空格，從而使屬性值的可讀性降低。

// bad
<input type=range 
       min=1 
       max=100 
       :value=minScore 
       class=compare>

//better
<input type="range" 
       min="1" 
       max="100" 
       :value="minScore" 
       class="compare">

模板（template）中盡可能在v-if/v-if-else/v-else使用key

如果一組v-if+ v-else的元素類型相同，最好使用key

<div
  v-if="error"
  key="search-status"
>
  Error：{{ error }}
</div>
<div
  v-else
  key="search-results"
>
  Result：{{ results }}
</div>

為元件樣式設置作用域

對於整體應用來說，我們可以設定樣式全局，但是在其它元件樣式都應該是有作用域的。

<style scoped>
    code...
</style>

對於樣式的開發，可以延伸閱讀BEM、OOCSS、SMACSS，或是CSS in JS 的方式。

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang