什么时候将一个Vue组件拆分成多个组件（子组件）

Posted 2023-02-23

【中文标题】什么时候将一个Vue组件拆分成多个组件（子组件）

【英文标题】：When to split a Vue component into multiple components (sub components)

【发布时间】：2020-06-10 23:40:18

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

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

【参考方案2】：

有趣的问题，我认为这真的取决于开发人员，并且他们都会同意不同意。但是，如果有帮助，想分享我的经验：

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

1/ 视图组件（或哑组件）：仅用于展示，无数据流逻辑

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

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

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

回到你的例子：产品列表就像一个控件组件，列表项很可能是一个视图组件。因此，我其实支持将它们分开的想法。

拆分组件会导致目录结构变长，但是通过良好的命名和过滤，我认为还是比单个文件组件的代码行多。