Vue 组件的理想大小是多少？

Question

我发现原子和分子的概念非常有趣，但我无法想象最终会有数千个原子成分分散在各处。提出问题的另一种方式是：Vue 组件什么时候会变得太大？谢谢您的意见。

Answer 1

好吧，这取决于很多事情，但是如果您看到您正在编写的代码将被重复使用两次以上，我想，将其作为组件是一个好主意。

此外，您可以考虑一下清楚的事实，如果您的组件中有很多 html，出于可读性的目的，您可以将此组件分成几部分。

例如我制作的这个组件，它是一个工作机会，

• 在蓝色矩形中，我们有公司招聘的缩写
• 在深灰色矩形中，工作的百分比，
• 用于切换“卡片”并显示完整工作内容的按钮，
• 要约的标题和假设的截止日期。

当它关闭时

然后当它切换时

代码中有很多 html，所以除了保留包含所有内容的工作机会组件之外，我还对其进行了拆分以提高可读性，

JobOffers 中总共有 5 个组件

• 我在网站各处重复使用的按钮
• JobAcronym（蓝色矩形）
• JobMeta（标题+截止日期+按钮），中间
• JobPercentage（深灰色矩形）
• JobContent（arichtext 组件）在切换时可见

这样做，它可以很容易地在我的代码中更具可读性，人们只需阅读代码就知道哪个部分代表什么。

当然，它会创建更多的原子和分子，但如果您创建一个名为 JobOffer 的目录，并将所需的所有组件放入内部（除了全局按钮之外），它不会使您的应用程序难以阅读。

即使某些组件没有背后的逻辑，例如 JobAcronym 和 JobPercentage，它们也包含大量 html，如果它们位于其中，可能会使您的 JobOffer 组件难以阅读。

总而言之，你真的需要勇敢地选择，如果你发现你很难找到在哪里应用编辑来更改某些 ui，因为有很多 html 代码，那么将其拆分。即使你不会在其他地方重复使用该组件。

重要的是代码的可读性，而且它确实更容易维护。

因此，当您或其他人在几个月后回来对其进行一些更新时，他们不会浪费时间尝试猜测哪个部分属于哪里。

我希望它回答了您的问题并消除了您的一些疑虑:)