本文主要是对 Vue 组件学习的总结和之后要写的内容的计划。
组件学习总结
组件库的本质是什么？
组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。
对于创建组件库的想法
我觉得，组件库的左右只能是一个 —— 提高生产效率。所以，在当前有不少优秀的组件库的情况下，我们能做的应该是帮助那些组件库变得更好。同时基于自己的业务写一些适用于自身业务的前度组件。
组件的发布流程
关于组件的发布流程，手把手教你封装 Vue 组件，并使用 npm 发布这篇文章对组件库从搭建到发布进行了详细的描述，亲测可用。
组件库的通用套路
其实是一些组件库中实现特殊效果所用到的思路。在下面整理了一下用法和应用场景：
DOM 操作
-
Document.elementFromPoint()方法可以获取页面中某个位置的元素，可以用在 IndexList 这类需要识别滑动位置元素的组件上。 -
Element.scrollTop可以获取和控制滚动条像素位置。可以在控制长页面的显示位置，也可以获取滚动条位置做一些操作（如长页面滚动到顶部时显示导航栏）。 - 组件库的各种拖动行为监听一般使用
touchstarttouchmove和touchend来获取位置（如果是鼠标则使用mousedownmousemove和mouseup事件），并通过 transform 来改变 DOM 元素位置。可以参考 draggable.js 实现拖拽的方法。这个做法一般用在想 loadmore 下拉效果、picker 选择器这类有拖拽行为的组件。
CSS
- 控制元素随着手指移动的两种实现方式：
- 动态更新
transform的值。
.target {
transform: translate3d(0, 6px, 0);
}
- 给元素的 position 设为 absolute 或 fixed，并不断更新定位属性
toprightbottom和left的值。
.target {
position: absolute;
left: 10%;
}
Vue 功能应用
- Vue 组件库全局安装使用的是 Vue 插件来实现的。
- 可以使用
vm.$refs获取子组件实例，从而调用子组件实例中的方法和数据。 - 可以使用
vm.$parent来获取父级组件实例，从而调用父组件的方法，修改父组件的数据。 - 还有
vm.$children可用于获取所有子组件。 - 像
v-loading和v-infinite-scroll这些指令是使用了 Vue 的自定义指令来实现的。了解不常用的 - 多用 Vue 的
transition过渡效果让组件的变化看着更加平滑。
其他
- 像 lazyload 这类已有工具库。由于已经有现成库 vue-lazyload，就直接引入导出。不重复造轮子。
最后
根据这段时间学习组件库的经验，自己动手写了一个组件库项目 otter-ui。本项目仅用于交流学习。可以参考着自己写一套组件库玩玩，还是挺酷的！
关于 《Vue 实验室》
截止到这篇文章发布，我的《Vue实验室》已经有30篇博客了~
算是对 Vue 相关知识大概学习了一遍了，通过输出的方式学习技术知识让我对这些技术知识学习的非常扎实。
接下来，我会继续维护之前的文章，让那些文章更简单易懂。并且不定期发布一些我觉得有意思的值得深入学习的 Vue 相关知识点。
