Vue 组件学习总结

本文主要是对 Vue 组件学习的总结和之后要写的内容的计划。

组件学习总结

组件库的本质是什么？

组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。

对于创建组件库的想法

我觉得，组件库的左右只能是一个 —— 提高生产效率。所以，在当前有不少优秀的组件库的情况下，我们能做的应该是帮助那些组件库变得更好。同时基于自己的业务写一些适用于自身业务的前度组件。

组件的发布流程

关于组件的发布流程，手把手教你封装 Vue 组件，并使用 npm 发布这篇文章对组件库从搭建到发布进行了详细的描述，亲测可用。

组件库的通用套路

其实是一些组件库中实现特殊效果所用到的思路。在下面整理了一下用法和应用场景：

DOM 操作

• Document.elementFromPoint() 方法可以获取页面中某个位置的元素，可以用在 IndexList 这类需要识别滑动位置元素的组件上。
• Element.scrollTop 可以获取和控制滚动条像素位置。可以在控制长页面的显示位置，也可以获取滚动条位置做一些操作（如长页面滚动到顶部时显示导航栏）。
• 组件库的各种拖动行为监听一般使用 touchstart touchmove 和 touchend 来获取位置（如果是鼠标则使用 mousedown mousemove 和 mouseup 事件），并通过 transform 来改变 DOM 元素位置。可以参考 draggable.js 实现拖拽的方法。这个做法一般用在想 loadmore 下拉效果、picker 选择器这类有拖拽行为的组件。

CSS

• 控制元素随着手指移动的两种实现方式：

1. 动态更新 transform 的值。

.target {
  transform: translate3d(0, 6px, 0);
}

2. 给元素的 position 设为 absolute 或 fixed，并不断更新定位属性 top right bottom 和 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 相关知识点。