概念
- 组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。
- 模块：在软件工程的定义中，模块是由边界元素限定的相邻程序元素（例如，数据说明，可执行的语句）的序列。按照模块的定义，过程、函数、子程序和宏等都可以视作模块；面向对象中的对象是模块；对象中的方法也是模块。模块是构成程序的基本构件。 | 类别 | 目的 | 接口 | 成果 | 架构定位 | |------|-----|------|------|---------| | 组件 |重用、解耦 高重用、低耦合|无统一接口|基础库、基础组件|纵向分层| |模块 |隔离/封装 高内聚、低耦合|统一接口|业务框架、业务模块|横向分块|
这里对耦合和内聚也做一个解释：
- 耦合：对一个软件结构内不同模块之间相连程度的度量。耦合的强弱取决于模块间接口的复杂程度。一个低耦合的系统中可以维护任意一个模块而不需要对其他模块有很多了解。例如：如果两个模块第一能独立工作，那么这两个模块的耦合程度最低。
- 内聚：模块内各个元素彼此结合的紧密程度。简单地说，理想内聚的模块只做一件事情。
话说回来，简而言之，模块化是对功能的拆分，模块化并没有要求一定组件化，就是说进行模块化拆分时你可以完全不考虑代码重用，只是把同一业务的代码做内聚整合成不同的模块。
vue中的组件
说了这么多，我们举一个例子来帮助理解。
如上图，可以先粗略地将用户管理这个页面分为两个模块：搜索框、列表，而对于列表，又可以分为表格和分页两个模块。这是模块化。
而表格中的操作按钮我们都可以将其划分成一个组件，对其进行逻辑复用，这是组件化。在前端项目中，对代码的组件化复用又包括了样式（css）和功能（js）的复用。顺便说一句，我一直认为vue的单文件组件设计是一种十分优秀的ui组件化方式。
我们再回头看一看vue官方文档中对组件的定义：组件是可复用的 Vue 实例，且带有一个名字。
而结合《软件工程》中模块的定义，我们可以发现：vue中的“组件”其实并不是单纯的组件化单元，它也可以作为模块化的单元。
例如上文的例子中我们将页面划分为搜索框和表格，在vue中的实现方式就是将他们各自分为一个组件，在组件中编写相应的逻辑。
vue中其他模块化的体现
- vue-router router是SPA应用的基石之一，而路由也是一种模块化的实现方式，例如：我们将用户管理界面和角色管理界面写进不同的路由中，他们也因此被分为了不同的模块。
- vuex.modules 写到这里，我也算明白了为什么vuex会设计modules，我们将不同业务模块的数据处理写在不同的文件中，保证数据中心代码的可维护性、可理解性和可靠性。
写在后面
之前对于模块化和组件化混为一谈，也难怪之前面试被挂。因此将他们总结了一下，以供大家查漏补缺。如果有写的不对的地方，欢迎大佬们指正。
