vue中什麼是模組化

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

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

什麼是模組化

我們說Vue專案是依照模組來劃分的，那什麼是模組呢？

模組化，就相當於我們網站的導覽欄，那麼每一個導覽項目就可以看作是如下圖片中提到的

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

• 在使用的時候，單一模組對應的是我們Vue專案下compentent下的檔案目錄

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

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

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

其餘的元件可以透過以下的方式進行注入使用。使用的時候，將元件的name屬性中的名稱在父元件中進行標籤化處理（vue會將以駝峰命名的名稱進行轉換--------（BookManager——>book-manager） )

• 首先要在用到的頁面中的中透過import進行導入

• #其次需要在compent中進行註冊,註冊的時候會使用元件的name屬性進行注入

總結：

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

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

當然，不使用模組化開發也能實現頁面的所有功能，但是會加重對伺服器請求的壓力和降低用戶的體驗，當頁面需要的當數據過多時，一次請求就包含了所有請求的數據，如果用戶不需要呢？這樣的請求還有效果嗎！當然是沒效果的，所以，利用模組化開發的想法就能解決這類問題

簡單談談自己對模組化開發使用的好處

#1、條理清晰，便於維護

2、不會一次將所有資料請求回來，使用者體驗感好

3、模組之間相互隔離，但是可以透過特定的介面公開內部成員，也可以依賴別的模組

模組化與元件化的比較

#1、元件化是獨立且可重複使用的程式碼組織單元。元件系統是vue核心特性之一，它使開發者使用小型、獨立且通常可重複使用的元件來建構大型應用；

2、元件化開發能大幅提高應用開發效率、測試性、復用性等；

3、元件使用依分類有：頁面元件、業務元件、通用元件；

4、vue的元件是基於設定的，我們通常寫的元件是元件配置而非元件，框架後續產生其建構函數，它們基於VueComponent，擴展於Vue；

5、vue中常見元件化技術有屬性prop，自訂事件，插槽等，它們主要用於元件通訊、擴展等；

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

7、元件應該是高內聚、低耦合的；

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

他們的差別在於

模組化：是從程式碼邏輯的角度進行分割；方便程式碼進行分層開發，保證每個功能模組的職能單一

元件化：是從UI介面的角度進行劃分，前端的元件化，方便UI元件的複用【相關推薦：vuejs影片教學、web前端開發】

以上是vue中什麼是模組化的詳細內容。更多資訊請關注PHP中文網其他相關文章！