在vue中，模塊化就是把單獨(dú)的一個(gè)功能封裝到一個(gè)模塊（文件）中，模塊之間相互隔離，但是可以通過特定的接口公開內(nèi)部成員，也可以依賴別的模塊（方便代碼的重用，從而提升開發(fā)效率，并且方便后期的維護(hù)）。模塊化開發(fā)的好處：1、條理清晰，便于維護(hù)；2、不會(huì)一次將所有數(shù)據(jù)請求回來，用戶體驗(yàn)感好；3、模塊之間相互隔離，但是可以通過特定的接口公開內(nèi)部成員，也可以依賴別的模塊。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

什么是模塊化

我們說Vue項(xiàng)目是按照模塊進(jìn)行劃分的，那么什么是模塊呢？

模塊化，就相當(dāng)于我們網(wǎng)站的導(dǎo)航欄，那么每一個(gè)導(dǎo)航項(xiàng)就可以看作是如下圖片中提到的

• 模塊化，就好比是一個(gè)大的功能項(xiàng)，那么這個(gè)大的功能項(xiàng)又可以包含多個(gè)組件。

• 在使用的時(shí)候，單個(gè)模塊對應(yīng)的是我們Vue項(xiàng)目下compentent下的文件目錄

• 每一個(gè)模塊下面又可以有多個(gè)組件，這些組件又組成了完整的模塊頁面（單頁面）

• 但是每一個(gè)模塊下面必須要有一個(gè)主要的文件（模塊父組件），這個(gè)文件必須在路由管理中（router/index.js）進(jìn)行注冊，注冊的時(shí)候滿足以下形式：

export default new Router({   mode: 'history',   routes: [ 		{       path: '/',       name: 'Default',       redirect: '/home',       component: Home    }]     })

其余的組件可以通過以下的方式進(jìn)行注入使用。在使用的時(shí)候，將組件的name屬性中的名稱在父組件中進(jìn)行標(biāo)簽化處理（vue會(huì)將以駝峰命名的名稱進(jìn)行轉(zhuǎn)化——–（BookManager——>book-manager））

• 首先要在用到的頁面中的中通過import進(jìn)行導(dǎo)入

• 其次需要在compent中進(jìn)行注冊,注冊的時(shí)候會(huì)使用組件的name屬性進(jìn)行注入

總結(jié)：

模塊化就是把單獨(dú)的一個(gè)功能封裝到一個(gè)模塊（文件）中，模塊之間相互隔離，但是可以通過特定的接口公開內(nèi)部成員，也可以依賴別的模塊（方便代碼的重用，從而提升開發(fā)效率，并且方便后期的維護(hù)）。

為什么要使用模塊化？使用模塊化的好處

當(dāng)然，不使用模塊化開發(fā)也能實(shí)現(xiàn)頁面的所有功能，但是會(huì)加重對服務(wù)器請求的壓力和降低用戶的體驗(yàn)，當(dāng)頁面需要的數(shù)據(jù)過多時(shí)，一次請求就包含了所有請求的數(shù)據(jù)，如果用戶不需要呢？這樣的請求還有效果嗎！當(dāng)然是沒效果的，所以，利用模塊化開發(fā)的思想就能解決這類問題

簡單談?wù)勛约簩δK化開發(fā)使用的好處

1、條理清晰，便于維護(hù)

2、不會(huì)一次將所有數(shù)據(jù)請求回來，用戶體驗(yàn)感好

3、模塊之間相互隔離，但是可以通過特定的接口公開內(nèi)部成員，也可以依賴別的模塊

模塊化和組件化的對比

1、組件化是獨(dú)立和可復(fù)用的代碼組織單元。組件系統(tǒng)是vue核心特性之一，它使開發(fā)者使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用；

2、組件化開發(fā)能大幅度提高應(yīng)用開發(fā)效率、測試性、復(fù)用性等；

3、組件使用按分類有：頁面組件、業(yè)務(wù)組件、通用組件；

4、vue的組件是基于配置的，我們通常編寫的組件是組件配置而非組件，框架后續(xù)會(huì)生成其構(gòu)造函數(shù)，它們基于VueComponent，擴(kuò)展于Vue；

5、vue中常見組件化技術(shù)有屬性prop，自定義事件，插槽等，它們主要用于組件通信、擴(kuò)展等；

6、合理的劃分組件，有助于提高應(yīng)用性能；

7、組件應(yīng)該是高內(nèi)聚、低耦合的；

8、遵循單向數(shù)據(jù)流的原則。

他們的區(qū)別在于

模塊化：是從代碼邏輯的角度進(jìn)行劃分；方便代碼進(jìn)行分層開發(fā)，保證每個(gè)功能模塊的職能單一

組件化：是從UI界面的角度進(jìn)行劃分，前端的組件化，方便UI組件的復(fù)用【