自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：前端小智
開(kāi)發(fā) 前端
為了跟蹤檢查過(guò)的 items，我們不得不創(chuàng)建一個(gè)數(shù)組，并用 items 的初始值來(lái)填充它。但是這段代碼還不夠強(qiáng)大。為了讓它變得更好，我們必須讓 items 通過(guò)它們的id而不是index 來(lái)訪問(wèn)，因?yàn)?index 是不可靠的，可以改變。例如，如果你添加一個(gè)支持通過(guò)拖放來(lái)重新排列items 的功能呢？

組件是前端框架的基本構(gòu)建塊。把它們?cè)O(shè)計(jì)得更好會(huì)使我們的應(yīng)用程序更容易改變和理解。在這節(jié)課中，分享一下在過(guò)去幾年中工作中學(xué)到的 9 個(gè)技巧。

1. 你可能不需要?jiǎng)?chuàng)建一個(gè)組件

在創(chuàng)建一個(gè)組件之前，看看它是為了可重用性和為某些UI添加一個(gè)狀態(tài)，還是僅僅為了組織和劃分代碼。

如果是后者，那么你就不需要?jiǎng)?chuàng)建它，因?yàn)樗粫?huì)增加更多不必要的工作，比如傳遞props和發(fā)射事件。

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

2. 使用插槽而不是 prop 來(lái)顯示內(nèi)容

假設(shè)有一個(gè)可重復(fù)使用的按鈕組件，它通過(guò)props獲取文本。

<BaseButton label="Delete Item"/>

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

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

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

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

3. 將該組件與觸發(fā)它的因素分組

有時(shí)有兩個(gè)獨(dú)立的組件在某種情況下一起使用。最好把它們放在一個(gè)新的組件中，這樣重復(fù)使用和移動(dòng)它們更容易。

一個(gè)常見(jiàn)的例子是 Modal 組件。我們通常在點(diǎn)擊一個(gè)特定的按鈕時(shí)顯示Modal。與其在每次我們想重用它（或把它移到其他地方）時(shí)添加showModal狀態(tài)和導(dǎo)入modal與它的按鈕，不如有一個(gè)單一的組件來(lái)顯示按鈕，當(dāng)用戶點(diǎn)擊時(shí)，它顯示相關(guān)的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，從任何地方顯示固定位置的元素

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

我們可以通過(guò)直接將 modal 顯示為<body>元素的一個(gè)子元素來(lái)輕松地避免這個(gè)問(wèn)題，無(wú)論我們?cè)诮M件結(jié)構(gòu)中使用它。

Teleport組件使我們能夠做到這一點(diǎn)。

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

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

這個(gè)組件是Vue 3內(nèi)置組件的一部分。如果你使用的是Vue 2，請(qǐng)查看PortalVue。

5. 在一個(gè)對(duì)象中分組相關(guān)的 props

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

改進(jìn) prop 列表的一個(gè)方法是將相關(guān)的屬性分組在一起。以這個(gè)組件為例:

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

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

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

所以現(xiàn)在我們很快就知道，layout 不是 post 數(shù)據(jù)的一部分。

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

6. 賦予每個(gè)循環(huán)item,賦予自己的狀態(tài)

創(chuàng)建一個(gè)新的組件的一個(gè)很好的理由是給一塊用戶界面提供它自己的狀態(tài)。我們需要這樣做的一個(gè)常見(jiàn)的地方是在v-for循環(huán)中：

<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>

為了跟蹤檢查過(guò)的 items，我們不得不創(chuàng)建一個(gè)數(shù)組，并用 items 的初始值來(lái)填充它。但是這段代碼還不夠強(qiáng)大。為了讓它變得更好，我們必須讓 items  通過(guò)它們的id而不是index 來(lái)訪問(wèn)，因?yàn)?nbsp;index 是不可靠的，可以改變。例如，如果你添加一個(gè)支持通過(guò)拖放來(lái)重新排列items  的功能呢？

為了簡(jiǎn)化這段代碼，我們可以引入一個(gè)新的組件，為每個(gè) item 保存一個(gè)狀態(tài)。像這樣:

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

Item 組件內(nèi)容如下：

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

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

這種方法的另一個(gè)好處是，我們把所有 item 的相關(guān)數(shù)據(jù)、計(jì)算屬性和方法都加在一個(gè)地方，便于理解和改變。

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

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

移動(dòng)帶有數(shù)據(jù)的UI組件變得更加容易。只需移動(dòng)該組件，而無(wú)需尋找其依賴關(guān)系。

當(dāng)所有的碎片被放在一個(gè)地方時(shí)，總是更容易理解代碼--可以看到用戶界面和它的數(shù)據(jù)來(lái)自哪里。

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

但一定要確保它是一個(gè)單一的層次。如果不是，那就尋找一種方法來(lái)改進(jìn)你的組件設(shè)計(jì)和它們之間的關(guān)系。

8. 純粹的UI組件不應(yīng)訪問(wèn)應(yīng)用程序的狀態(tài)

有兩種類型的前端組件：純UI組件和特定應(yīng)用組件。

純粹的UI組件是像按鈕、輸入框等。它們不應(yīng)該知道關(guān)于應(yīng)用程序的任何事情。它們的工作僅僅是為了顯示UI--它們通過(guò) props 獲取數(shù)據(jù)。

特定于應(yīng)用程序的組件是知道應(yīng)用程序狀態(tài)的組件，無(wú)論是本地狀態(tài)還是全局狀態(tài)(通過(guò)狀態(tài)管理庫(kù)，如Pinia)。

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

如果你正在構(gòu)建自己的UI組件，這個(gè)技巧也適用。如果你使用的是外部庫(kù)，如 Vuetify 或Quasar，那么你就不必?fù)?dān)心這個(gè)問(wèn)題--這些組件在設(shè)計(jì)時(shí)就考慮到了這一點(diǎn)。

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

當(dāng)創(chuàng)建一個(gè)組件時(shí)，你應(yīng)該把它看作是一塊UI，可以像其他本地元素一樣使用。

讓用戶指定組件周?chē)目臻g是實(shí)現(xiàn)這一目標(biāo)的好方法。

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

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

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

來(lái)源：https://tahazsh.com/blog/vue-component-design-tips/

責(zé)任編輯：武曉燕 來(lái)源： 大遷世界
Vue組件構(gòu)建塊
相關(guān)推薦

2020-06-12 09:07:03

技術(shù)總監(jiān)數(shù)據(jù)庫(kù)

2020-06-08 11:28:22

場(chǎng)景索引設(shè)計(jì)

2020-08-19 09:22:14

Python語(yǔ)言工具

2020-12-31 10:33:05

Python開(kāi)發(fā)編程

2021-07-29 11:30:31

GitLinux命令

2021-06-28 11:46:31

GitLinux

2013-12-18 16:20:20

雷軍小米

2020-05-14 18:25:40

微信移動(dòng)應(yīng)用群聊

2025-01-14 12:00:00

Java開(kāi)發(fā)代碼

2021-04-27 07:52:19

StarterSpring Boot配置

2020-09-09 07:13:05

RPC框架

2019-01-18 20:36:40

Python佩奇turtle

2017-03-07 10:07:25

PythonIDE

2020-04-29 14:50:40

代碼對(duì)比工具

2022-04-01 10:05:36

FigmaFluent圖標(biāo)

2021-11-22 10:13:42

計(jì)算機(jī)工具 技術(shù)

2011-11-07 15:55:28

網(wǎng)頁(yè)設(shè)計(jì)

2020-12-25 09:38:07

Vue前端代碼

2021-12-27 14:33:47

Python語(yǔ)言開(kāi)發(fā)

2021-02-10 07:31:12

VuejsElementUI
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)