開篇：Vue.js 的精髓——組件
寫在前面
Vue.js把还，無疑是當(dāng)下最火熱的前端框架 Almost校焦，而 Vue.js 最精髓的，正是它的組件與組件化艘包。寫一個 Vue 工程的猛，也就是在寫一個個的組件。
業(yè)務(wù)場景是千變?nèi)f化的想虎，而不變的是 Vue.js 組件開發(fā)的核心思想和使用技巧卦尊，掌握了 Vue.js 組件的各種開發(fā)模式，再復(fù)雜的業(yè)務(wù)場景也可以輕松化解舌厨。本小冊則著重介紹筆者在 3 年的 Vue.js 開發(fā)及兩年的 iView 開源中積累和沉淀的對 Vue.js 組件的見解和經(jīng)驗猫牡。
本小冊不會介紹 Vue.js 的基礎(chǔ)用法，因為市面上已經(jīng)沉淀了大量的相關(guān)技術(shù)資料邓线，而且 Vue.js 的文檔已經(jīng)足夠詳細(xì)。如果您尚未接觸 Vue.js 或正打算開始了解煌恢，推薦您先閱讀筆者出版的《Vue.js 實戰(zhàn)》（清華大學(xué)出版社）一書骇陈，它適合剛接觸 Vue.js 的開發(fā)者。因此你雌，本小冊適合已經(jīng)了解或使用過 Vue.js 的開發(fā)者。
這一節(jié)婿崭，我們先籠統(tǒng)地聊聊 Vue.js 組件和組件化以及本小冊各章節(jié)的梳理肴颊。
組件的分類
一般來說氓栈，Vue.js 組件主要分成三類：
-
由
vue-router產(chǎn)生的每個頁面，它本質(zhì)上也是一個組件（.vue）婿着，主要承載當(dāng)前頁面的 HTML 結(jié)構(gòu)授瘦，會包含數(shù)據(jù)獲取、數(shù)據(jù)整理形纺、數(shù)據(jù)可視化等常規(guī)業(yè)務(wù)。整個文件相對較大徒欣，但一般不會有props選項和自定義事件逐样，因為它作為路由的渲染，不會被復(fù)用打肝，因此也不會對外提供接口。在項目開發(fā)中闯睹，我們寫的大部分代碼都是這類的組件（頁面），協(xié)同開發(fā)時始花，每人維護自己的頁面，很少有交集酷宵。這類組件相對是最好寫的躬窜，因為主要是還原設(shè)計稿浇垦，完成需求荣挨，不需要太多模塊和架構(gòu)設(shè)計上的考慮。
-
不包含業(yè)務(wù)此虑，獨立口锭、具體功能的基礎(chǔ)組件，比如日期選擇器鹃操、模態(tài)框等。這類組件作為項目的基礎(chǔ)控件荆隘，會被大量使用，因此組件的 API 進(jìn)行過高強度的抽象莫其，可以通過不同配置實現(xiàn)不同的功能。比如筆者開源的 iView乱陡，就是包含了 50 多個這樣基礎(chǔ)組件的 UI 組件庫。
每個公司都有自己的組件使用規(guī)范或組件庫憨颠，但要開發(fā)和維護一套像 iView 這樣的組件庫胳徽，投入的人力和精力還是很重的爽彤，所以出于成本考慮，很多項目都會使用已有的開源組件庫适篙。
獨立組件的開發(fā)難度要高于第一類組件，因為它的側(cè)重點是 API 的設(shè)計聂儒、兼容性硫痰、性能、以及復(fù)雜的功能效斑。這類組件對 JavaScript 的編程能力有一定要求，也會包含非常多的技巧奇昙，比如在不依賴 Vuex 和 Bus（因為獨立組件敌完，無法依賴其它庫）的情況下，各組件間的通信蠢挡，還會涉及很多腦殼疼的邏輯凳忙，比如日期選擇器要考慮不同時區(qū)、國家的日歷習(xí)慣勤家，支持多種日期格式柳恐。
本小冊也會重點介紹此類組件的各種開發(fā)模式和技巧热幔，對應(yīng)不同的模式讼庇，會帶有具體的組件實戰(zhàn)。
-
業(yè)務(wù)組件蠕啄。它不像第二類獨立組件只包含某個功能，而是在業(yè)務(wù)中被多個頁面復(fù)用的和媳，它與獨立組件的區(qū)別是哈街，業(yè)務(wù)組件只在當(dāng)前項目中會用到，不具有通用性骚秦，而且會包含一些業(yè)務(wù)，比如數(shù)據(jù)請求帝牡；而獨立組件不含業(yè)務(wù)蒙揣，在任何項目中都可以使用，功能單一懒震，比如一個具有數(shù)據(jù)校驗功能的輸入框。
業(yè)務(wù)組件更像是介于第一類和第二類之間瓷炮，在開發(fā)上也與獨立組件類似递宅，但寄托于項目，你可以使用項目中的技術(shù)棧办龄，比如 Vuex、axios安接、echarts 等英融，所以它的開發(fā)難度相對獨立組件要容易點歇式，但也有必要考慮組件的可維護性和復(fù)用性胡野。
小冊的內(nèi)容
因為本小冊是圍繞 Vue.js 組件展開的，所以第二節(jié)會講解 Vue.js 組件的三個 API：prop给涕、event够庙、slot，當(dāng)然耘眨，如果你已經(jīng)開發(fā)過一些獨立組件，完全可以跳過這節(jié)內(nèi)容胆屿。
3 - 7 小節(jié)會介紹組件間通信的一些方法和黑科技偶宫，一部分是 Vue.js 內(nèi)置的，一部分是自行實現(xiàn)的纯趋，在實際開發(fā)中，會非常實用纯命。同時也利用這些方法完成了兩個具體的實戰(zhàn)案例：
- 具有數(shù)據(jù)校驗功能的表單組件 —— Form痹栖；
- 組合多選框組件 —— CheckboxGroup & Checkbox。
本小冊都會以這種核心科技 + 對應(yīng)實戰(zhàn)的形式展開揪阿。
8 - 10 小節(jié)介紹 Vue 的構(gòu)造器 extend 和手動掛載組件 $mount 的用法及案例。Vue.js 除了我們正常 new Vue() 外碍粥，還可以手動掛載的黑毅，這 3 節(jié)將介紹手動掛載一個 Vue 組件的使用場景钦讳。其中涉及到兩個案例：
- 動態(tài)渲染 .vue 文件的組件 —— Display枕面；
- 全局通知組件 —— $Alert缚去。
Display 組件用于將 .vue 文件渲染出來，線上的案例是 iView Run枕荞，它不需要你重新編譯項目搞动，就可以渲染一個標(biāo)準(zhǔn)的 Vue.js 組件。
$Alert 是全局的通知組件鹦肿，它的調(diào)用方法不同于常規(guī)組件。常規(guī)組件使用方法形如：
<template>
<Alert content="通知內(nèi)容" :duration="3"></Alert>
</template>
<script>
import Alert from '../components/alert.vue';
export default {
components: { Alert }
}
</script>
而 $Alert 的調(diào)用更接近 JS 語法：
export default {
methods: {
showMessage () {
this.$Alert({
content: '通知內(nèi)容',
duration: 3
});
}
}
}
雖然與常規(guī) Vue 組件調(diào)用方式不同瞭吃，但底層仍然由 Vue 組件構(gòu)成和維護涣旨。
11 - 12 小節(jié)介紹 Render 函數(shù)與 Functional Render，并完成一個能夠渲染自定義列的 Table 組件和蚪。Render 函數(shù)也是 Vue.js 組件重要的一部分穆律，只不過在大多數(shù)業(yè)務(wù)中不常使用。本小節(jié)會介紹它的使用場景峦耘。
13 小節(jié)介紹作用域 slot（slot-scope），并基于這種方法同樣實現(xiàn) Table 組件泣崩。slot 用的很多洛口，但 slot-scope 在業(yè)務(wù)中并不常用，但在一些特定場景下第焰，比如組件內(nèi)部有循環(huán)體時，會非常實用杀赢。
14 - 15 小節(jié)介紹遞歸組件，并完成樹形控件 —— Tree滤淳。
16 - 19 小節(jié)是綜合拓展砌左，會著重講解 Vue.js 容易忽略卻很重要的 API，以及對 Vue.js 面試題的詳細(xì)分析汇歹。除此之外，還會總結(jié)筆者在兩年的 iView 開源經(jīng)歷中的經(jīng)驗煤蹭，除了技術(shù)細(xì)節(jié)外取视，還包括開源項目的持續(xù)性發(fā)展、推廣等作谭。
結(jié)語
三年前，我開始接觸 Vue.js 框架贝或，當(dāng)時就被它的輕量锐秦、組件化和友好的 API 所吸引。與此同時酱床，我也開源了 iView 項目扇谣。三年的磨(cǎi )礪(kēng)昧捷，沉淀了不少關(guān)于 Vue.js 組件的經(jīng)驗罐寨。
本小冊的內(nèi)容也許不會讓你的技術(shù)一夜間突飛猛進(jìn)鸯绿，但絕對使你醍醐灌頂簸淀。
那么毒返，請準(zhǔn)備好一臺電腦和一杯咖啡，一起來探索 Vue.js 的精髓吧饿悬。
