我用这9个小技巧封装Vue组件，老大夸我’封得好‘

78 阅读 0 评论 52 点赞

我是靠谱客的博主痴情皮带，最近开发中收集的这篇文章主要介绍我用这9个小技巧封装Vue组件，老大夸我’封得好‘，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

微信搜索【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 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-component-design-tips/