本文主要是對 Vue 組件學習的總結(jié)和之后要寫的內(nèi)容的計劃。

組件學習總結(jié)

組件庫的本質(zhì)是什么？

組件庫其實就是一堆組件組成的一個項目，一般項目里會有組件和演示項目。當項目調(diào)試時 webpack 打包演示項目的入口文件來進行演示和調(diào)試，在發(fā)布組件庫時 webpack 打包組件庫的入口文件。將打包完的組件發(fā)布到 npm。

對于創(chuàng)建組件庫的想法

我覺得，組件庫的左右只能是一個 —— 提高生產(chǎn)效率。所以，在當前有不少優(yōu)秀的組件庫的情況下，我們能做的應該是幫助那些組件庫變得更好。同時基于自己的業(yè)務寫一些適用于自身業(yè)務的前度組件。

組件的發(fā)布流程

關(guān)于組件的發(fā)布流程，手把手教你封裝 Vue 組件，并使用 npm 發(fā)布這篇文章對組件庫從搭建到發(fā)布進行了詳細的描述，親測可用。

組件庫的通用套路

其實是一些組件庫中實現(xiàn)特殊效果所用到的思路。在下面整理了一下用法和應用場景：

DOM 操作

• Document.elementFromPoint() 方法可以獲取頁面中某個位置的元素，可以用在 IndexList 這類需要識別滑動位置元素的組件上。
• Element.scrollTop 可以獲取和控制滾動條像素位置?？梢栽诳刂崎L頁面的顯示位置，也可以獲取滾動條位置做一些操作（如長頁面滾動到頂部時顯示導航欄）。
• 組件庫的各種拖動行為監(jiān)聽一般使用 touchstart touchmove 和 touchend 來獲取位置（如果是鼠標則使用 mousedown mousemove 和 mouseup 事件），并通過 transform 來改變 DOM 元素位置?？梢詤⒖?draggable.js 實現(xiàn)拖拽的方法。這個做法一般用在想 loadmore 下拉效果、picker 選擇器這類有拖拽行為的組件。

CSS

• 控制元素隨著手指移動的兩種實現(xiàn)方式：

1. 動態(tài)更新 transform 的值。

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

2. 給元素的 position 設為 absolute 或 fixed，并不斷更新定位屬性 top right bottom 和 left 的值。

.target {
  position: absolute;
  left: 10%;
}

Vue 功能應用

• Vue 組件庫全局安裝使用的是 Vue 插件來實現(xiàn)的。
• 可以使用 vm.$refs 獲取子組件實例，從而調(diào)用子組件實例中的方法和數(shù)據(jù)。
• 可以使用 vm.$parent 來獲取父級組件實例，從而調(diào)用父組件的方法，修改父組件的數(shù)據(jù)。
• 還有 vm.$children 可用于獲取所有子組件。
• 像 v-loading 和 v-infinite-scroll 這些指令是使用了 Vue 的自定義指令來實現(xiàn)的。了解不常用的
• 多用 Vue 的 transition 過渡效果讓組件的變化看著更加平滑。

其他

• 像 lazyload 這類已有工具庫。由于已經(jīng)有現(xiàn)成庫 vue-lazyload，就直接引入導出。不重復造輪子。

最后

根據(jù)這段時間學習組件庫的經(jīng)驗，自己動手寫了一個組件庫項目 otter-ui。本項目僅用于交流學習?？梢詤⒖贾约簩懸惶捉M件庫玩玩，還是挺酷的！

關(guān)于 《Vue 實驗室》

截止到這篇文章發(fā)布，我的《Vue實驗室》已經(jīng)有30篇博客了~
算是對 Vue 相關(guān)知識大概學習了一遍了，通過輸出的方式學習技術(shù)知識讓我對這些技術(shù)知識學習的非常扎實。
接下來，我會繼續(xù)維護之前的文章，讓那些文章更簡單易懂。并且不定期發(fā)布一些我覺得有意思的值得深入學習的 Vue 相關(guān)知識點。