在vue中，模組化就是把單獨(dú)的一個(gè)功能封裝到一個(gè)模組（檔案）中，模組之間相互隔離，但是可以透過(guò)特定的介面公開(kāi)內(nèi)部成員，也可以依賴(lài)別的模組（方便程式碼的重複使用，從而提升開(kāi)發(fā)效率，並且方便後期的維護(hù)）。模組化開(kāi)發(fā)的好處：1、條理清晰，便於維護(hù)；2、不會(huì)一次將所有資料請(qǐng)求回來(lái)，使用者體驗(yàn)感好；3、模組之間相互隔離，但是可以透過(guò)特定的介面公開(kāi)內(nèi)部成員，也可以依賴(lài)別的模組。

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

什麼是模組化

我們說(shuō)Vue專(zhuān)案是依照模組來(lái)劃分的，那什麼是模組呢？

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

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

• 在使用的時(shí)候，單一模組對(duì)應(yīng)的是我們Vue專(zhuān)案下compentent下的檔案目錄

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

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

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

其餘的元件可以透過(guò)以下的方式進(jìn)行注入使用。使用的時(shí)候，將元件的name屬性中的名稱(chēng)在父元件中進(jìn)行標(biāo)籤化處理（vue會(huì)將以駝峰命名的名稱(chēng)進(jìn)行轉(zhuǎn)換--------（BookManager——>book-manager） )

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

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

總結(jié)：

#模組化就是把單獨(dú)的一個(gè)功能封裝到一個(gè)模組（檔案）中，模組之間相互隔離，但是可以透過(guò)特定的介面公開(kāi)內(nèi)部成員，也可以依賴(lài)別的模組（方便程式碼的重複使用，從而提升開(kāi)發(fā)效率，並且方便後期的維護(hù)）。

為什麼要使用模組化？使用模組化的好處

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

簡(jiǎn)單談?wù)勛约簩?duì)模組化開(kāi)發(fā)使用的好處

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

2、不會(huì)一次將所有資料請(qǐng)求回來(lái)，使用者體驗(yàn)感好

3、模組之間相互隔離，但是可以透過(guò)特定的介面公開(kāi)內(nèi)部成員，也可以依賴(lài)別的模組

模組化與元件化的比較

#1、元件化是獨(dú)立且可重複使用的程式碼組織單元。元件系統(tǒng)是vue核心特性之一，它使開(kāi)發(fā)者使用小型、獨(dú)立且通?？芍匮}使用的元件來(lái)建構(gòu)大型應(yīng)用；

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

3、元件使用依分類(lèi)有：頁(yè)面元件、業(yè)務(wù)元件、通用元件；

4、vue的元件是基於設(shè)定的，我們通常寫(xiě)的元件是元件配置而非元件，框架後續(xù)產(chǎn)生其建構(gòu)函數(shù)，它們基於VueComponent，擴(kuò)展於Vue；

5、vue中常見(jiàn)元件化技術(shù)有屬性prop，自訂事件，插槽等，它們主要用於元件通訊、擴(kuò)展等；

6、合理的分割元件，有助於提高應(yīng)用效能；

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

8、遵循單向資料流的原則。

他們的差別在於

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

元件化：是從UI介面的角度進(jìn)行劃分，前端的元件化，方便UI元件的複用【相關(guān)推薦：vuejs影片教學(xué)、web前端開(kāi)發(fā)】

以上是vue中什麼是模組化的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！