tags: Vue.js ItIron2020

前言

我知道突然寫這樣的主題有些突兀，不過前幾天weather app的文章有點超乎我的預期XD 原本是打算利用剩下這幾天至少寫3個小專案的教學，不過每一篇的篇幅都比我預期的長，即便已經省略了很多邏輯的講解也提供了程式碼，但在節奏上就是有些怪怪的! 我需要自己調整一下，今天就容我繞個小道，來講講寫vue時你應該要遵守的幾個慣例吧!

1. 在使用v-for時，永遠要綁定key值

如果你是用vue-cli打造的專案，這已經是一個強制的慣例了，一旦你使用v-for卻沒有綁定key時，它就會無情的報錯，像是如果你寫出類似以下的玩意。

<div v-for="item in 5"> {{item}}</div>

畫面就會毫不留情的噴給你看

直到你把程式碼修改為類似以下的東西，世界才又恢復了和平。

<div v-for="item in 5" :key="item.id"> {{item}}</div>

為什麼我們需要這麼麻煩? 想像一下今天你不綁定key，那若是你產出了10個li節點，你要怎麼只控制某個節點呢? 也就是說，綁定key的用意在於讓每個v-for產出的組件都是唯一的，日後你才有辦法更動指定的組件。 既然綁定key的目的在於唯一性，你在綁定key時也就要特別注意不要出現重複的key值，否則你在console中也會看到警告!

2. 維持固定的short-hand寫法

我們在使用v-on & v-bind或是slot時，常常會搭配對應的縮寫

• @->v-on
• :->v-bind
• #->slot

這是相當方便、且可讀性高的寫法，不過有時候會看到同一份專案中同時出現v-on:click & @click的出現，這就相當惱人了! 注意在你的專案中，你要碼就全部都用縮寫，不然就不要使用~! 就像code style的要求一樣，一致性是很重要的~!

3. 避免v-for & v-if使用在同一個組件上

你可能會碰到一些情況，在你使用v-for時，你想要加入一些條件判斷讓它只顯示部分的組件，那你可能就會寫出這樣的玩意兒

<h1>Admin Users</h1>
<div v-for='user in users' v-if='uesr.isAdmin'>

但你實際運行後你會發現似乎有些問題，畫面並不如你所想像的!(可以在codepen環境玩玩看:D)

原因很單純，因為v-for在優先度上高於v-if，也就是說它會先迭代所有元素後，最終再檢查v-if的部分，若你有著類似以上的需求，通常我們會建議你使用computed屬性來達成這樣的效果。

<div v-for="user in adminUsers" :key="user.key"> {{user.name}} </div>


computed: {
    adminUsers() {
      return this.users.filter(user=> user.isAdmin)
    }
}

這樣世界就再次和平了，我們感謝computed的努力!

4. 永遠檢查傳入的props

我們知道父子層溝通時很常透過props屬性，很多時候我們為求方便，再接收參數時並不會作額外的檢查，就寫出了像是這樣的東西?

props: ['currentUser', 'products']

但實際上你不應該全然相信傳進來的資料，就跟後端永遠不會相信前端傳來的資料總是乾淨的，適當的檢查可以避免很多不必要的錯誤，上述的範例就可以改寫為類似以下

props: {
  currentUser: {
    type: Object,
    default: null,
    required: true,
  },
  products: {
    type: Object,
    default: [],
    required: true,
  },
}

5. 不要在template中塞入太複雜的邏輯

很多時候我們在呈現view時，在元素上我們常常會加入一些基本的js邏輯，比方說

<h1> {{user.name}} </h1>

但請盡量避免在template中塞入太複雜的js邏輯，像是

<h1> {{user.name.split(' ').reverse().join('')}} </h1>

請跟剛剛v-for & v-if的情況一樣，派出我們的好幫手computed來處理

<h1> {{reversedName}} </h1>

computed: {
    reversedName() {
      return this.user.name.split(' ').reverse().join('')
    }
}

6. 避免直接去操作DOM元素

我們知道vue是透過virtual DOM的概念去處理資料變動時的畫面更新，當資料的處理告一段落後，我們再將virtual DOM的變化套用到實際的DOM元素上，也就是說其實我們在用vue這樣的前端框架時會避免直接去操作DOM(效能與維護的考量)，既然框架的本意如此，你在寫vue時也應該避免利用選取DOM然後直接操作的手法，反之，我們會建議你使用ref屬性，舉個例子來說

<h1 ref="title"> Hello World </h1>

this.$refs.title // 利用這樣去選取該元素並作需要的操作 

結語

今天的內容相當相當的簡單，我們介紹了幾個寫vue時我們常遵照的慣例，有些內容在你看來也許不是這麼的必要，不過在專案規模擴大時，有著一定的規範會幫助你日後的維護與協作! 這部分的內容是我根據以前閱讀過的文章、目前培養出的觀念而寫出來的，若是在任何一個部分有問題的話，再麻煩各位大大用留言的方式提醒我一下:D 非常感謝~! 那我們就明天見囉! 快結束了，加油!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D