以 Vue 为例
按照功能职责划分的话，大概可以拆分为 4 层，越往下通用性越强，业务耦合度也就越低：
基础组件：一些业务无关的、原子的基础组件。我们常见的 antd-design, element-ui、iview 这些组件库提供的组件就属于基础组件。它的特征如下：模式组件：模式组件依旧是业务无关的，这些组件通常是一些最佳实践和设计模式，旨在将一些重复的事情固化下来，提高开发的效率。antd-design-pro, iview-pro 就属于这一层。业务组件： 业务组件，顾名思义就是耦合了我们自己的业务。它只能适用于某些特定的领域。比如用户选择器、素材选择器等等。页面：最终呈现到用户的界面，它的复用性最差。很多组件都有他们的惯用方法，比如表单组件会使用 v-model 来进行绑定表单值、模态框我们会使用visible 或 show() 方法来控制显示。