Vue基础——组件化思想

组件化思想

一、为什么要有组件化

• 多人协作是及其困难的一件事情
• 为了增加开发效率，增加代码的可维护性和可扩展性
• 提出优秀的代码应该是高内聚、低耦合

高内聚：一段代码描述一件完整的事情

低耦合：不与其他代码牵扯过多

编程思想历程：函数化=》模块化=》组件化

二、什么是组件化

• 一个项目由多个组件拼接而成，每个组件负责一块功能
• 每个组件都是独立的个体
• 组件之间相互独立，通过特定的方式进行沟通

三、如何实现组件化

• 组件内部应该封装一类事情的完整逻辑

• 组件通过外放接口与外界沟通

  派发器的实现：

  type -> 事件 -> 逻辑 -> type -> 派发器 -> 数据的更改

  

• 组件封装：

  • 需要封装的情况：

    • 组件复用
    • 模块化

  • 组件的好处：

    • 可维护性： 每个组件都是独立的，更容易理解和维护。修改一个组件不会对其他组件产生意外的影响。
    • 可复用性： 公共组件可以在整个应用程序中重复使用，从而减少冗余代码的编写。
    • 团队协作： 不同的团队可以独立开发和测试不同的组件，降低团队之间的耦合度。
    • 扩展性： 可以更容易地引入新的功能或替换现有的组件，而不会影响整个应用程序的稳定性。

  • 公共组件：

    • 定义：公共组件是那些在整个应用程序或组织内被广泛使用的通用性组件，其功能独立于具体业务逻辑。
    • 特点：这些组件通常包含一些通用的功能、工具类、UI组件等，它们被设计成可重用、可配置、可扩展的，以便在不同的业务场景中被调用和使用。
    • 例子：可能包括日期选择器、弹窗组件、表单验证组件等，这些组件在整个应用程序中可能被多个业务模块使用。

  • 业务组件：

    • 定义：业务组件是与特定业务逻辑相关的、可重用的模块，负责处理应用程序的具体业务需求。
    • 特点：这些组件通常包含了特定领域的逻辑、数据处理、与后端交互等功能，是应用程序的核心构建块。
    • 例子：在一个电子商务应用中，购物车组件、商品列表组件、支付组件等可以被视为业务组件。

  业务组件由多个子组件组成，多个子组件由多个基础UI组件构成

总结：

• 组件化先是一种思想，然后才有了具体的实现
• 目的是让项目功能高度封装又相互独立（高内聚、低耦合）