【译】Vue 可复用组件的“三座大山”
大家好，这里是大家的林语冰。今天分享的是来自 Vue 官方资讯安利的一篇博客。
Vue 开发的核心原则之一就是组件筑基的架构，可复用组件可以实现高效性、标准化、可扩展性和团队协作性的“技术扶贫”。如果说“帝国主义”、“封建主义”、“官僚主义”是旧时代的“三座大山”，那么现存组件改造、维护一致性以及依赖和状态管理就是 Vue 可复用组件摩登时代的“三座大山”。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 3 Major Problems of Reusable Components in Vue.js。
当我们谈论或讨论 Vue 创建 UI 组件时，可复用性乃回头率超高的一大谈资。是的，Vue 的关键原则之一是其组件筑基的架构，这助力了可复用性和模块化。但这到底意味着什么呢？
假设您创建了一个可复用组件：
- 您或您的同事真的可以在系统的其他部分复用祂吗？
- 一旦新需求涌现，您可能不得不考虑改造该“可复用组件”。
- 如果您需要拆分“可重用组件”，以便您可以将拆分组件应用到另一个地方，那咋办？
Vue 创建实际的可复用组件可能很头大。在本文中，我会“开足码力”探讨可复用组件的概念、应用祂们时面临的问题，以及克服这些问题的重要性。
可复用组件是什么？
可复用组件是可以在同一 App 的不同部分甚至跨项目使用的 UI 构建块。
祂们封装了特定的功能或 UI 模式，并且无需进行一大坨修改就可以轻松集成到 App 的其他部分。
可复用组件的复利
在 Vue 中使用可复用组件，您可以享受若干复利，包括但不限于：
- 生产力：这允许开发者一次撸码并多次复用。这减少了冗余并节省了宝贵的开发时间。
- 标准化：这促进 Vue 项目的一致性和标准化。祂们确保在整个 App 中保持相同的设计模式、样式和功能。
- 可扩展性：随着项目的发展，这更容易扩展和适配项目。通过将 App 分解为更小的可复用组件，处理复杂功能和添加新功能变得更易管理。
- 团建：这促进从事 Vue 项目的团队成员之间的协作。祂们提供了团队中人人都可以使用和理解的共同语言和 UI 元素集。
应用可复用组件的“三座大山”
虽然可复用性是 Vue 组件的一个理想特性，但有若干问题可能是其实现的绊脚石：
- 现存组件改造：一个问题是改造 App 中已使用的现存组件。该组件可能需要变更以支持已有需求和全新需求。变更 App 其他部分已使用的组件可能会引入意外的副作用并破坏其他区域的功能。平衡变更需求与保持兼容性可能很复杂。
- 组件设计的一致性和灵活性：另一个问题是在允许定制和灵活性的同时，保持可复用组件不同实例之间的一致性。可复用组件应该足够万能，以适应不同的设计需求和风格。虽然但是，在不牺牲组件的核心功能和一致性的情况下，提供可定制选项可能会很头大。
- 组件依赖和状态的管理：使用可复用组件涉及依赖管理并确保每个组件保持自治和独立。组件不应紧密依赖外围资源或 App 的状态管理系统。这允许不同的项目轻松集成，并减少冲突或意外副作用的可能性。
研究案例
举个栗子，客户想要一个内部员工目录系统。该项目基于敏捷方法论，且在开发前无法收集所有需求。一共有 3 个阶段（原型、第一阶段和第二阶段）。
为了演示，我将重点关注如下所示的卡片组件：
原型
作为原型阶段的一部分，我需要提供一个用户简介页面。用户简介将包含基本的用户卡组件，其中包括用户头像和名称。
第一阶段
在第一阶段，客户希望将用户详情（比如生日、年龄、电话号码和电子邮件）添加到用户卡组件中。
此外，客户希望添加员工目录页并以卡片格式显示用户简介。
在此阶段，用户卡组件在两个页面上都是可复用的。
第二阶段
用户反馈员工名录页太混乱。太多的信息使页面难以使用。因此，客户希望用户详情在悬停时显示在工具提示中。用户设置页上的需求保持不变。
这个新需求令人头大：
- 我应该改造现存的用户卡组件，以支持工具提示需求，并承担影响“用户设置”页面中的用户卡组件的风险呢？或者
- 我应该复制现存的用户卡组件并添加工具提示功能呢？
因为我们不想破坏已经在生产中的东东，所以我们倾向于选择后者。起初，这可能言之有理，但祂可能具有相当大的破坏性，尤其是对于大型迭代项目而言：
- 大型代码库：这导致更大的代码库，因为每个重复的组件都会添加多余的代码行。这变得难以维护，因为每当需要更新或修复 bug 时，开发者都需要在多个位置进行更改。祂还增加了不一致性的机会。
- 短期收益，长期痛苦：短期内这似乎是一个便捷的解决方案，尤其是在处理紧迫的期限或紧急需求时。虽然但是，随着项目的增长，维护重复的组件会变得越来越难且费时。对重复组件的改造或升级需要在多个实例之间复制，导致提高了错误的机会。
- 系统性能：这会对系统性能产生负面影响。冗余代码会增加 App 的大小，导致渲染时间变慢并增加内存使用量。这可能会导致用户体验不佳并降低系统效率。
如何克服上述问题
请做好心理准备，可复用组件在整个项目中可能并非始终保持不变。这听起来可能是陈词滥调，但如果您仔细想想，需求总是神头鬼脸。您无法控制未来，除非您“开足码力”。
当然辣，经验可以助力您设计更好的组件，但这需要时间。
重构可复用组件
根据我的经验，我会重新设计和重构可复用组件。重构是在不改变其原始功能的前提下重组代码的过程。
我确信存在一大坨重构方法，于我而言，我将组件重构并分解为更小的组件。较小的组件可以在整个系统中灵活地应用它们。让我们瞄一眼我将如何应用上述的案例研究。
注意：重构 UI 组件需要依法行事。此外，这有时可能具有挑战性，因为您需要平衡项目交付期限和更整洁的代码。
将解决方案应用于研究案例
首先，我将现存的用户卡组件拆分为 4 个组件：
- 卡片组件
- 头像组件
- 姓名组件
- 用户详情组件
之后，我将创建一个工具提示组件。创建单独的工具提示允许我在系统的其他部分重用祂。
最后，我将把这些组件组合在一起，如下所示
对于用户设置页面，我将使用用户卡组件，该组件由卡片、头像、名称组件和用户详情组件组成。
至于员工目录页面，我计划使用 2 个组件组合
- 基本的用户卡组件由卡片、头像和名称组件组成。
- 用户工具提示组件由卡片、工具提示和用户详情组件组成。
注意：您可能会注意到，提供的解决方案基于原子设计概念。此概念可以优先最小化“可复用性”挑战。
单元测试有用吗？
某些人可能认为为可复用组件编写单元测试可以缓解此问题。讲真的，全面的测试覆盖范围有助于确保对组件的改造和美化不会意外破坏功能。
虽然但是，单元测试并不会使组件更加可复用。祂只是让祂变得更鲁棒。事实上，重构为更小的组件将任务分解为确切的部分，并使单元测试编写更易管理。
完结撒花
在 Vue 中创建实际的可重用组件可能具有挑战性，相关问题包括但不限于：改造现存组件、维护一致性以及依赖和状态管理。虽然但是，可复用组件的复利值得我们克服这些问题。可复用组件增强了代码组织，提高了开发效率，并有助于创建一致的用户界面。
当我们面临新的需求或任务时，我们会继续改进，这样我们自己才能更好地设计可复用组件。
友情赞助
您现在收看的是直男翻译系列，学废了的小伙伴可以点赞友情赞助本系列，我们每天佛系投稿，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~