共计 3647 个字符，预计需要花费 10 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
组件是前端框架的根本构建块。把它们设计得更好会使咱们的应用程序更容易扭转和了解。在这节课中，分享一下在过来几年中工作中学到的 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>
为了跟踪查看过的 items，咱们不得不创立一个数组，并用 items 的初始值来填充它。然而这段代码还不够弱小。为了让它变得更好，咱们必须让 items 通过它们的 id 而不是 index 来拜访，因为 index 是不牢靠的，能够扭转。例如，如果你增加一个反对通过拖放来重新排列 items 的性能呢？
为了简化这段代码，咱们能够引入一个新的组件，为每个 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）。
而宽度也是如此。如果用户想让该组件具备响应性，他们必须笼罩其宽度和最大宽度。
因而，通过不在组件外部设置宽度和边距，总是给用户这种管制是有意义的。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
起源：https://tahazsh.com/blog/vue-…
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
