何时将一个Vue组件拆分为多个组件（子组件）

Question

创建 Vue 组件时，如何决定何时将一个组件分离为具有多个子组件的父组件，而不是只拥有一个具有更多逻辑的组件？

我在非 SPA 网站的几个地方使用 Vue。在网站的一个页面上，我需要显示一个项目列表，每个项目旁边都有一些图标来执行一些简单的操作，例如显示/隐藏。我正在将列表构建为 Vue 组件，我们将其称为 ProductList。但我不确定是否将该列表中的每个项目作为一个单独的组件。什么时候适合将一个组件拆分为多个子组件？

我自己的推理告诉我，应该只为需要能够独立的事物创建组件。由于这些项目不会在列表之外使用，因此将它们放在单独的 ProductListItem 组件中并放入 ProductList 组件中是没有意义的。我应该只拥有 ProductList 组件中的所有代码。正确的？

但当我查看互联网上的其他示例时，其中许多都讲述了不同的故事。例如，我记得看到一个示例，其中有一个 Article 组件、一个 ArticleTitle 组件、一个 ArticleBody 组件和一个 ArticleEnd 组件（或类似的组件）。文章组件的模板中有<article-title>,<article-body>和<article-end>。如果 ArticleTitle 组件或 ArticleBody 组件仅在 Article 组件内使用，而不是独立使用，那么为什么还要将其作为单独的组件呢？我在这里错过了什么吗？是否有技术标准来决定是否使用多个组件，或者这只是个人喜好？

Answer 1

有趣的问题，我认为这实际上取决于开发人员，一切都会变得同意或不同意。不过，如果有帮助的话，想分享一下我的经验：

在最优化的系统设计中，它应该被分成组件，因为这就是现代前端框架击败纯 html 编码（基于组件的编码）的原因。我们什么时候应该拆分组件，我认为 Decade Moon 的答案提出了一个很好且明确的观点。不过，我想写更多关于组件类型的内容：

1/视图组件（或哑组件）：仅用于显示目的，没有数据流逻辑

2/控制组件（或智能组件）：显示许多哑组件并包含数据流逻辑

3/容器（或视图）：包含很多控制组件，通常把服务器交互的逻辑放在这里（api调用，....）

当我们这样划分时，维护起来会更容易，因为我们更好地控制了数据的流动方式。

回到您的示例：产品列表就像一个控制组件，而列表项可能是一个视图组件。因此，我实际上支持将它们分开的想法。

拆分组件会使目录结构变得更长，但是通过良好的命名和过滤，我认为它仍然比具有太多代码行的单个文件组件要好。

Answer 2

通常，最好在以下情况下创建新组件：

• 如果该组件将在您的应用程序中多次使用，特别是如果它没有耦合到父组件。
• 如果组件有很多逻辑，或者很大的模板等，那么最好将其分开，这样它就不会膨胀父组件。尽量让你的组件保持小并且易于推理。
• 组件是否具有可以与父组件隔离进行测试的逻辑。
• 如果组件有一些内部状态，那么作为一个单独的组件会更容易实现，并且具有自己的内部数据，而父级不必管理这些数据。

至于您的列表组件，似乎每个列表项都是特定于产品列表的，不会在其他地方使用，并且可能不是很复杂，因此最好将其保留在列表组件中。不必要地分离组件只会增加复杂性和内存使用量（特别是对于包含大量项目的列表），而没有任何好处。