iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

30天手把手的vue.js教學!系列 第 27

2020it邦鐵人賽-30天手把手的Vue.js教學 Day27 - 額外插播: 6個寫vue你應該要知道的Best practices

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>

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

demo1

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

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

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

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)

why

原因很單純,因為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


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day26 - 小試身手! 打造個簡單的天氣app吧!(下)
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day28 - 關心時事! 做個簡單的COVID-19追蹤app吧!(上)
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言