Elementui源码学习仿el-divider

本文记录仿el-divider组件的细节，帮助大家更好的理解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...组件需求分析关于分割线的组件，常用的场景有：分割线的水平分割（如：段落之间的分隔）水平分割线添加文字说明（文字说明的位置一般位于分割线的左、中、右）分割类型的垂直分割（横向之间的分割行内文字和正文）分割线样式类型（实线分割线或虚线分割线或虚线分割线）由于垂直分割距离不够，所以垂直分割没有文字说明。功能组件用到的知识点我们知道，一个功能其实就是一个处理流水线。我们输入参数，函数处理后，返回处理后得到结果。对于一个组件，其实可以看成是一个函数（functionalcomponent）。我们传递参数，组件props接收，然后组件根据传递的参数渲染相应的样式效果。这种方式其实和我们原来使用组件的方式类似，只是更加精简。毕竟只考虑接收参数，没有生命周期，thisinstance之类的。因此，功能组件的渲染效率会比普通组件高。所以在某些情况下，使用函数式组件会更高效两种定义函数式组件的方式比如通过传参来渲染文本，有两种方式：一：renderfunctiondefinition方法二：模板定义

具体细节关于函数式组件，详见官方文档：https://cn.vuejs.org/v2/guide...这里为什么要提到函数式组件？因为el-divider组件封装了功能组件（因为组件只是用来显示分割线，所以不需要这个实例，生命周期等），所以：为了提高渲染效率，使用功能组件在这里。功能组件的一般情况如下：仅用于显示的组件。毕竟没有逻辑运算。还可以考虑相关高层组件的运行周期。总体而言，功能组件更灵活地解决了一个像素太粗的问题。看一下问题图，只需要稍微缩放对应的dom元素即可：transform:scaleY(0.95);或转换：scaleX(0.95)；组件包el-divider组件整体比较简单，主要是功能组件的参数细节组件封装的渲染组件封装的代码wrapping的代码