记录--vue组件划分的思考

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

对vue项目来说，组件是构成项目的基本单元，为了方便理解，这里定义两类组件：页面组件，功能组件。
为什么需要划分这两类组件是从组件复用来考虑的。

我们知道在复杂应用中，页面状态管理早已不是早期的简单的子父组件的传值，兄弟组件传值。而当我们寻求到vuex这种状态管理来处理组件间状态管理的时候，我们同样也对使用vuex的组件失去了复用的可能。

为什么失去了复用的可能？
我们知道是用第三方状态管理就意味着状态丢给了第三方，而我们的组件依赖第三方状态管理的时候，单个组件就不足以仅把组件复用，还必须根据该组件对于的状态进行第三方状态管理的配置。同时我们可能还要对各种状态是做什么的了如指掌，这和写一个该组件的成本没什么差别（可能比写一份该组件的成本更高）。

所以，对于该类使用或者可能使用第三方库的组件划分为页面组件，而剩下的和第三方库无依赖关系的组件划分为功能组件。
从而我们可以理解为，页面组件是无法复用的组件，功能组件是可以复用的组件。

如何定义他们

最先对页面组件的定义仅仅是整张页面的统筹，页面组件也是由一个个功能组件堆叠而成的，比如element-ui这样的组件库，他们的组件都可以称之为功能组件。而我们所写的页面，引入了element-ui中的各种组件堆出了一张管理系统的页面，就是页面组件。我们通常会在页面组件中发送数据请求，根据接口返回数据，处理为可用数据，然后将数据分发给不同功能组件。同样，页面组件也会接受功能组件返回值，根据返回值做不同的处理（或请求数据，或修改数据）

而对功能组件的定义为，他的展示只受父组件通过props组件传值过来的数据影响，他的所有状态均为内部私有，与外部组件的交互有vue提供的props以及事件分发vm.$emit()。因为只有这也组件才能保证其完整的内部状态，在复用时不受其他因素的影响。

如何划分他们

划分页面组件最简单的方式是由路由划分，每一个路由对应一个页面组件。
功能组件的划分需要对页面组件的功能进行分析分类。功能组件的划分可能根据不同人的理解各不相同，但是原则只有一个：

功能组件应该类似面向对象编程一样，一个功能组件应该只是完成一个功能。

拿当你看见这篇博文时页面的布局来举个例子：

页面组件就是当前你看见的这个网页地址的完整显示，他将包含几个功能组件
功能组件可能有以下几个:
1. 文章组件，可能需要的props的值为：标题，时间，内容   （文章内容显示）
2. 个人信息组件：可能需要的props的值为：头像等个人信息 （个人信息显示）
3. 列表组件：可能需要的props的值为：列表名，列表list  （右下角的最新文章，文章存档，热门文章等显示）
4. 评论组件： 可能需要的props的值为：头像，名称，时间，内容。
5. 按钮组件： 页面中的各种按钮，比如左边的点赞分享按钮，可能需要的props为两张小图片，一张正常显示，一张移入显示

在谈谈自己对页面组件的理解

自己对页面组件的理解仅仅是各种功能组件的整合，就和我们写以前项目中使用js调用各种库一样，通过这些库写出了各种效果。我们可能通过jquery的ajax发送一个请求，请求回来一个分也数据，我们把分页数据处理，把数据条数传给了一个分页插件，然后分页插件帮我们渲染出了分页器。我们可能把请求回来的列表内容传递给了一个自己封装的表格渲染插件，表格渲染插件帮我们渲染出了我们想要的表格数据并且显示在了页面上面。而页面组件就担任这这个js所做的功能，请求数据，分发数据，接受插件的回调，在请求数据，在分发数据
而页面组件也是一样，请求处理数据，分发数据给对应组件的props，接受某些组件的vm.$emit()传回来的值，在请求处理数据，修改组件的props的值进行传递

由上面一系列类比，其实组件就好比或者说就是插件，或者面向对象的写法。思想上面对组件的划分就和对功能的封装。组件留的props就是对接口的定义。本质上没区别的。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。