展示组件和容器组件

需求

业务开发中经常会碰到一个会有新增和编辑状态的表单，刚开始写业务的时候，会把新增逻辑和编辑逻辑糅杂在一起，组件耦合度高，后期修改难度大，产生bug的可能性也大大增加。

概念

关注点分离

指的是执行不同操作的逻辑不应该被分组或结合到一起。例如获取数据和数据展示（UI）的逻辑应该分开放置到不同的组件。

如果要将 Vue 组件按照职能划分，我们可以将其分为两种类型：容器组件和展示组件。

容器组件和展示组件的概念来自于 Redux 文档

那么首先什么是容器组件呢？

它是一个容器性质的组件，我们可以把它理解为最外层的父组件，也就是最顶层的组件，一般我们把它放置在 views 文件夹下，其功能主要用于做数据提取与实现公共逻辑，然后渲染对应的子组件。（容器组件是提供、创建和持有数据并服务于子组件的组件。容器组件的唯一工作是处理数据。它不包含自己的任何 UI。相反，展示组件作为使用这些数据的子组件。）

另一类组件叫做展示组件，

字面意思就是主要用于做展示的组件，其主要功能是负责接收从容器组件传输过来的数据并在页面上渲染，实现其内部独有的功能逻辑。（主要职责是在 UI 上呈现数据，从容器组件中获取数据。这些组件是无状态的，它们不会更改收到的数据。）

一个页面中容器组件与展示组件的关系如下图所示：

修改后

组件的层次结构

了解了组件职能的划分后，我们再来看一下组件的层次结构。关于组件的层次，一般页面中不宜嵌套超过 3 层的组件，因为超过 3 层后父子组件的通信就会变得相对困难，不利于项目的开发和维护。3 层结构的容器组件与展示组件的数据传递如下：

这样展示组件 B 下面的容器组件 C 便可以不依赖于容器组件 A 的数据，其可以单独的进行数据获取和状态更新。

而对于那些你不知道应该划分为容器组件和展示组件的组件，比如一些耦合度较高的组件，那么你可以暂时归类到其他组件中，混用容器和展示，随着日后功能的逐渐清晰，我们再将其进行划分。