我们在用vue构建应用的时候，会创建许多的组件。下面是我在项目过程中遇到问题之后得到的几点启发：
1. 首先按照功能将应用分成几个部分，这几个大部分就可以做一个组件。比如，我项目中的home组件，表示的是首页，展示所有文章列表，以及一些子分类；article组件，表示的是文章页，展示文章的具体内容；center组件，表示的是个人中心页，可以设置以及修改信息等等。每个部分都对应一个功能。与其说是按功能分的，其实更偏向于按页面构建的，一个大页面就是一个组件。
2. 在分成几大部分之后，再按照更细致一点的功能进行划分。这里拿article组件举例。
article页包括：文章头图，文章内容，文章评论，文章推荐。所以接下来将article再次分成4个小组件。每个小组件完成单独的任务，与其他组件没有直接关联。这里我遇到过一个问题，我一开始将数据的获取都放在article这个组价里，然后通过props属性传递给子组件。实际证明这样存在很多问题。首先就是维护，明明是子组件里的数据，却是在父组件里请求的；直接修改通过props传递的数据是敏感操作，会报错。当然可以通过vue.$emit()去派发事件，然后在父组件中定义函数修改。但是这样维护起来很费劲。所以这种功能独立的组件的数据请求一定要放到单独的组件中，比如这里的文章评论。为什么说是功能独立？因为在某些时候，小组件间的数据可能共同维护者父组件的状态，这个时候，我们可能更需要将fetch放到父组件里达到更好维护数据的效果。
3. 组件思想带给我们最重要的就是模块化，易于维护，可复用。所以在项目中，在页面结构分析的时候，尽可能多的抽象出来功能类似的或者页面结构相同的模块独立成小模块。功能类似，可以配合slot达到展示的一些区别。像头部，顶部，点击到顶部这些功能和页面展示都一样毋庸置疑，必须组件走起。在项目中经常会有多次应用的组件。而这些组件的使用要注意。下面是我遇到的问题：
还是文字评论页。在文字评论中有一个匿名的功能。考虑到每一条评论都有匿名功能，所有毫不犹豫就选择组件。用多选框配合定位定制了一个多选的效果界面。效果图如下：
未选中
选中
图截得的不好有点丑。这个匿名功能组件：组件内部维护一个checked变量表示当前选中的状态，通过$emit可以在父组件（我这里就是评论组件）中修改是否选中的状态。将组件引入到评论中，展示结果完全符合预期。我们存在两级评论，三处匿名。
评论区域的结构
展示结果还是蛮开心的，但是点击测试之后问题来了。因为一级评论和二级评论可以同时存在多条，而这个时候如果我们只维护三个变量去控制展示效果（我一开始的做法），同级之间是会相互影响的。所以我们需要在拿到评论数据的时候，将其映射成可以维护的用户管理匿名状态的数据，在点击操作的时候改变相应的数据。
前端路慢慢兮其修远已，吾将好好撸博客！
网友评论