我用這九個小技巧封裝Vue組件，老大得夸我’封得好‘

作者：前端小智 2022-10-26 11:47:45

為了跟蹤檢查過的 items，我們不得不創建一個數組，并用 items 的初始值來填充它。但是這段代碼還不夠強大。為了讓它變得更好，我們必須讓 items 通過它們的id而不是index 來訪問，因為 index 是不可靠的，可以改變。例如，如果你添加一個支持通過拖放來重新排列items 的功能呢？

組件是前端框架的基本構建塊。把它們設計得更好會使我們的應用程序更容易改變和理解。在這節課中，分享一下在過去幾年中工作中學到的 9 個技巧。

1. 你可能不需要創建一個組件

在創建一個組件之前，看看它是為了可重用性和為某些UI添加一個狀態，還是僅僅為了組織和劃分代碼。

如果是后者，那么你就不需要創建它，因為它只會增加更多不必要的工作，比如傳遞props和發射事件。

不僅如此，它還要求我們跳轉到該文件以查看它所包含的內容，而不是直接在父組件中看到它，這就干凈多了。

2. 使用插槽而不是 prop 來顯示內容

假設有一個可重復使用的按鈕組件，它通過props獲取文本。

<BaseButton label="Delete Item"/>

如果想在其中顯示一個圖標，必須添加更多的道具，如<BaseButton label="Delete Item" icon="delete" />并更新組件以顯示該圖標。

但有了插槽，我們就可以在每次使用該組件時，以想要的方式顯示標簽：

<BaseButton>
  Delete Item <Icon name="delete" />
</BaseButton>

或者你只需要把某個單詞加粗。對于插槽，可以直接在文本中使用<strong>標記，而不是在組件中解析它。

3. 將該組件與觸發它的因素分組

有時有兩個獨立的組件在某種情況下一起使用。最好把它們放在一個新的組件中，這樣重復使用和移動它們更容易。

一個常見的例子是 Modal 組件。我們通常在點擊一個特定的按鈕時顯示Modal。與其在每次我們想重用它（或把它移到其他地方）時添加showModal狀態和導入modal與它的按鈕，不如有一個單一的組件來顯示按鈕，當用戶點擊時，它顯示相關的modal。

<!-- CreateItemButton.vue -->
<template>
  <Modal v-if="showModal" @close="showModal = false" />
  <BaseButton @click="showModal = true">
    Create Item
  </BaseButton>
</template>

<script setup>
const showModal = false
</script>

4. 使用 teleport，從任何地方顯示固定位置的元素

繼續前面的例子，如果我們想正確地顯示 modal ，我們需要確保模態使用正確的z-index，并且它在HTML代碼中顯示在正確的位置，所以它總是顯示在頁面上所有東西的上面。

我們可以通過直接將 modal 顯示為<body>元素的一個子元素來輕松地避免這個問題，無論我們在組件結構中使用它。

Teleport組件使我們能夠做到這一點。

我們所要做的就是用 <Teleport to="body"> 來包裝 modal 組件。

<!-- BaseModal.vue -->
<template>
  <Teleport to="body">
    <div class="modal"></div>
  </Teleport>
</template>

這個組件是Vue 3內置組件的一部分。如果你使用的是Vue 2，請查看PortalVue。

5. 在一個對象中分組相關的 props

組件的 prop 列表是組件界面的一個主要部分。接口越清晰，就越容易使用和推理。

改進 prop 列表的一個方法是將相關的屬性分組在一起。以這個組件為例:

<PostCard
  :title="post.title"
  :date="post.date"
  :layout="currentLayout"
  :image="post.imageUrl"
  <!-- more props -->
/>

我們需要花幾秒鐘時間來了解這里有哪些 props 與帖子(post )相關。但我們可以像這樣把與帖子相關的 props 分組，使之更加清晰。

<PostCard :post="post" :layout="currentLayout" />

所以現在我們很快就知道，layout 不是 post 數據的一部分。

不僅如此，我們還通過這種方法使更新 props 變得更加容易。例如，添加或刪除與帖子相關的props ，不需要我們更新組件的 props

6. 賦予每個循環item,賦予自己的狀態

創建一個新的組件的一個很好的理由是給一塊用戶界面提供它自己的狀態。我們需要這樣做的一個常見的地方是在v-for循環中：

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id">
      <input type="checkbox" v-model="checkedItems[index]">
    </div>
  </div>
</template>
<script setup>
const checkedItems = ref(items.map(item => item.checked))
</script>

為了簡化這段代碼，我們可以引入一個新的組件，為每個 item 保存一個狀態。像這樣:

<template>
  <div>
    <Item v-for="item in items" :key="item.id" :item="item" />
  </div>
</template>

Item 組件內容如下：

<template>
  <div>
    <input type="checkbox" v-model="checked">
  </div>
</template>

<script setup>
const props = defineProps({ item: Object })
const checked = ref(props.item.checked)
</script>

這種方法的另一個好處是，我們把所有 item 的相關數據、計算屬性和方法都加在一個地方，便于理解和改變。

7. 盡可能地將加載數據移至其用戶界面附近

無論你是用GraphQL還是其他API加載，最好把代碼放在盡可能接近使用它的用戶界面的地方。這有兩個原因:

移動帶有數據的UI組件變得更加容易。只需移動該組件，而無需尋找其依賴關系。

當所有的碎片被放在一個地方時，總是更容易理解代碼--可以看到用戶界面和它的數據來自哪里。

有時，有多個組件使用同一個獲取的數據。在這種情況下，可以將獲取的代碼上移一級。因此，會有一個父組件，在那里獲取數據，還有一個子組件，然后把數據傳遞給它。

但一定要確保它是一個單一的層次。如果不是，那就尋找一種方法來改進你的組件設計和它們之間的關系。

8. 純粹的UI組件不應訪問應用程序的狀態

有兩種類型的前端組件：純UI組件和特定應用組件。

純粹的UI組件是像按鈕、輸入框等。它們不應該知道關于應用程序的任何事情。它們的工作僅僅是為了顯示UI--它們通過 props 獲取數據。

特定于應用程序的組件是知道應用程序狀態的組件，無論是本地狀態還是全局狀態(通過狀態管理庫，如Pinia)。

分離這些組件使得在應用程序的其他地方，甚至在其他應用程序中重用UI組件更加容易。

如果你正在構建自己的UI組件，這個技巧也適用。如果你使用的是外部庫，如 Vuetify 或Quasar，那么你就不必擔心這個問題--這些組件在設計時就考慮到了這一點。

9. 不要在組件中指定 width 或 margin

當創建一個組件時，你應該把它看作是一塊UI，可以像其他本地元素一樣使用。

讓用戶指定組件周圍的空間是實現這一目標的好方法。

假設你的組件在其根元素上有一個頂部邊距，而用戶想把它顯示在某個元素下面，但沒有頂部邊距。要做到這一點，用戶必須設置一個與組件的margin相同的負margin，比如margin-top: -50px；更不用說在某些情況下，用戶必須與選擇器的特異性相匹配（或者可能使用!important）。

而寬度也是如此。如果用戶想讓該組件具有響應性，他們必須覆蓋其寬度和最大寬度。

因此，通過不在組件內部設置寬度和邊距，總是給用戶這種控制是有意義的。

來源：https://tahazsh.com/blog/vue-component-design-tips/

責任編輯：武曉燕來源：大遷世界

Vue 組件構建塊