我用这9个技巧打包Vue组件，老板夸我‘好封’

微信搜索【伟大的走向世界】，我将与大家分享前端行业动态、学习路径等。尽快地。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。组件是前端框架的基本构建块。更好地设计它们将使我们的应用程序更易于更改和理解。在本次会议中，分享我在过去几年的工作中学到的9个技巧。1.你可能不需要创建组件在创建组件之前，看看它是为了可重用性和为某些UI添加状态，还是只是为了组织和划分代码。如果是后者，那么你不需要创建它，因为它只会添加更多不必要的工作，比如传递道具和发出事件。不仅如此，它还需要我们跳转到那个文件去查看它包含的内容，而不是直接在父组件中查看，这样就干净多了。2.使用slot而不是props来显示内容假设有一个可重用的按钮组件，它通过props获取文本。如果你想在其中显示一个图标，你必须添加更多像的道具并更新组件以显示该图标.但是有了插槽，我们可以在每次使用组件时以我们想要的方式显示标签：对于插槽，可以直接在文本中使用标签，而不用在组件中解析。3.将组件与触发它的组件分组有时在特定情况下会同时使用两个单独的组件。最好将它们放在一个新组件中，以便更容易重用和移动它们。一个常见的例子是Modal组件。我们通常在单击特定按钮时显示模态。与其在每次我们想要重用它（或将其移动到其他地方）时添加showModal状态并使用其按钮导入模态，我们可以有一个显示按钮的组件，当用户单击它时，它显示关联的模态.4.使用teleport从任意位置显示固定位置的元素-index，它在HTML代码中出现在正确的位置，所以它总是出现在一切之上在页面上。我们可以通过在组件结构中的任何地方直接将模式显示为元素的子元素来轻松避免此问题。Teleport组件使我们能够做到这一点。我们所要做的就是用包装模态组件。这个组件是Vue3内置的一部分-在组件中。如果您使用的是Vue2，请查看PortalVue。5.将相关的props组合在一个对象中组件的props列表是组件界面的主要部分。界面越清晰，使用和推理就越容易。改进属性列表的一种方法是将相关属性组合在一起。以这个组件为例：/>我们需要几秒钟的时间才能了解这里的哪些props与帖子（post）相关。但是我们可以像这样把post相关的props分组，这样更清晰。所以现在我们很快就知道布局不是发布数据的一部分。不仅如此，我们还使使用这种方法更新道具变得更加容易。例如，添加或删除与帖子相关的道具不需要我们更新组件的道具列表。6.为每个循环项赋予自己的状态创建新组件的一个很好的理由是赋予用户界面一块自己的状态。我们需要这样做的一个常见地方是在v-for循环中：为了跟踪选中的项目，我们必须创建一个数组并用项目的初始值填充它。但是这段代码还不够强大。为了使它更好，我们必须使项目可以通过它们的id而不是索引来访问，因为索引是不可靠的并且可以更改。例如，如果您添加支持拖放以重新排列项目的功能会怎样？为了简化这段代码，我们可以引入一个新组件来保存每个项目的状态。像这样：Item组件的内容如下：这种方法的另一个优点是我们将所有与项目相关的数据、计算属性和方法添加到一个地方，这很容易理解和更改。7.将加载的数据尽可能靠近其用户界面无论您是使用GraphQL还是其他API加载它，最好将代码放置在尽可能靠近使用它的用户界面的位置。这有两个原因：移动带有数据的UI组件变得更容易。只需移动该组件而无需查找其依赖项。当所有部分都在一个地方时，总是更容易理解代码——您可以看到UI及其数据的来源。有时，多个组件使用相同的获取数据。在这种情况下，可以将获取的代码上移一层。因此，将有一个父组件，用于获取数据，还有一个子组件，用于将数据传递给它。但要确保它是单层的。如果没有，那就寻找一种方法来改进您的组件设计和它们之间的关系。8.纯UI组件不应该访问应用程序的状态。前端组件有两种类型：纯UI组件和特定于应用程序的组件。纯UI组件就像按钮、输入框等。他们不应该对应用程序一无所知。他们的工作只是显示UI——他们通过props获取数据。特定于应用程序的组件是了解应用程序状态的组件，无论是本地的还是全局的（通过状态管理库，如Pinia）。分离这些组件可以更轻松地在应用程序的其他地方甚至其他应用程序中重用UI组件。如果您正在构建自己的UI组件，这个技巧也适用。如果您使用的是Vuetify或Quasar等外部库，那么您不必担心这一点——组件在设计时就考虑到了这一点。9.不要在组件中指定宽度或边距创建组件时，您应该将其视为可以像任何其他本机元素一样使用的UI片段。让用户指定组件周围的空间是实现此目的的好方法。假设您的组件在其根元素上有上边距，并且用户希望将其显示在某个元素下方，但没有上边距。为此，用户必须设置一个等于组件边距的负边距，例如margin-top:-50px；更不用说在某些情况下用户必须匹配选择器的特异性（或者可能使用!important）。宽度也是如此。如果用户希望此组件具有响应性，他们必须覆盖其宽度和最大宽度。因此，通过不在组件内设置宽度和边距来始终为用户提供此控件是有意义的。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。来源：https://tahazsh.com/blog/vue-...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。