vue中動態(tài)引進組件、動態(tài)引進js模塊文件方式

更新時間：2026年05月31日 10:23:55 作者：賞花賞景賞時光

本文詳細介紹了Vue中動態(tài)引入組件和JS模塊文件的方法與應用場景,包括包括通過動態(tài)引入組件和解決組件資源浪費問題is通過動態(tài)引入JS模塊文件is優(yōu)化解決第三方業(yè)務個性化需求導致的資源加載浪費問題為Vue開發(fā)提供了優(yōu)化方案

一、動態(tài)引進組件

動態(tài)引進組件原因：在實際業(yè)務中，比如訂單詳情頁面detail.vue，里面包含了多個第三業(yè)務的訂單詳情，但是不同的業(yè)務詳情頁面區(qū)別又很大，所以只能根據(jù)不同的業(yè)務來源，書寫不同的詳情組件，在根據(jù)業(yè)務來源展示相應的組件

問題：如果詳情對接的業(yè)務來源越來越多，并且不同的來源對于詳情頁面定制化需求又高，這樣就會增加越來越多的組件，如果在頁面都是直接引進組件，那么沒用到的組件就會造成資源浪費，導致頁面文件大，并在加載時間變長

一般寫法如下,頁面中用到的組件都直接引進來

<template>
  <div>
    <Bcomponent v-if="isShowBComponent" />
    <CComponent v-else-if="isShowCComponent" />
    <p v-else-if="isShowPage">show another something</p>
  </div>
</template>
<script>
// 直接引進來，不必要的組件也加載，造成頁面體積增大
import BComponent from './b.vue'
import CComponent from './c.vue'
export default {
  data() {
    return {
      isShowBComponent: false,
      isShowCComponent: false,
      isShowPage: false,
      condition: 0
    }
  },
  components: {
    BComponent,
    CComponent
  },
  mounted() {
    this.gtDataFromInterface()
  },
  methods: {
    gtDataFromInterface() {
      // 通過接口拿到數(shù)據(jù)后，根據(jù)字段返回值，確定要展示那個組件，比如接口返回字段condition，根據(jù)它的返回值展示
      // 在這里賦值
      this.condition = condition
      this.handleShowPage()
    },
    handleShowPage() {
      if (this.condition === 1) {
        this.isShowBComponent = true
      } else if (this.condition === 1) {
        this.isShowCComponent = false
      } else {
        this.isShowPage = true
      }
    }
  }
}
</script>

動態(tài)引進vue組件寫法,和上面寫法不同的地方就是引進組件的方式不一樣

動態(tài)引進組件語法：

a）在components屬性里面用這種方式引進組件：BComponent: () => {'./b.vue'}
b）在template中用v-if控制展示：<BComponent v-if="isShowBComponent" />
c）在符合的條件下將isShowBComponent設置為true

<template>
  <div>
    <Bcomponent v-if="isShowBComponent" />
    <CComponent v-else-if="isShowCComponent" />
    <p v-else-if="isShowPage">show another something</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowBComponent: false,
      isShowCComponent: false,
      isShowPage: false,
      condition: 0
    }
  },
  components: {
    // 動態(tài)引進，當isShowBComponent=true的時候，才會真正加載BComponent組件文件
    BComponent: () => import('./b.vue'),
    CComponent: () => import('./c.vue')
  },
  mounted() {
    this.gtDataFromInterface()
  },
  methods: {
    gtDataFromInterface() {
      // 通過接口拿到數(shù)據(jù)后，根據(jù)字段返回值，確定要展示那個組件，比如接口返回字段condition，根據(jù)它的返回值展示
      // 在這里賦值
      this.condition = condition
      this.handleShowPage()
    },
    handleShowPage() {
      if (this.condition === 1) {
        this.isShowBComponent = true
      } else if (this.condition === 1) {
        this.isShowCComponent = false
      } else {
        this.isShowPage = true
      }
    }
  }
}
</script>

特殊說明：

1、當路由放在<keep-alive>里面，則vue文件里面就有activated屬性

2、如果BComponent里面有activated屬性

動態(tài)引進的化，BComponent的activated里面的方法就不會執(zhí)行

 components: {
    // 動態(tài)引進，當isShowBComponent=true的時候，才會真正加載BComponent組件文件
    BComponent: () => import('./b.vue'),
    CComponent: () => import('./c.vue')
  }

如果不用動態(tài)引進組件的方式，則BComponent的activated里面的方法會執(zhí)行

動態(tài)引進activated里面的方法不執(zhí)行原因：

在初始化組件的聲明周期方法的時候，就會對activated進行收集，如果是動態(tài)引進，則當文件加載完成時候，已經(jīng)過了activated進行收集的時機，那么自然BComponent的activated里面的方法不會執(zhí)行

二、在.vue文件中動態(tài)引進js模塊文件

動態(tài)引進原因：比如payResult.vue文件表示支付結果頁面，現(xiàn)實中我們有很多第三方業(yè)務場景在支付完成之后跳轉到支付結果頁面，在該頁面不同的第三方業(yè)務會有一些個性化的需求，比如A、B業(yè)務需要做分享功能，C業(yè)務不需要做分享功能，這時候我們將分享功能的一些邏輯處理放在了handle.js文件里面，share.vue表示分享組件。這時候如果不區(qū)分業(yè)務來源，一進頁面統(tǒng)一加載handle.js share.vue組件，那么C業(yè)務本身不需要分享功能，但也加載了分享的相關文件，這會造成不必要的資源加載，浪費頁面渲染性能

理想狀態(tài)：根據(jù)業(yè)務來源，當為A、B業(yè)務的時候才加載分享相關文件，當為C業(yè)務則不加載，這時候就需要動態(tài)引進js模塊文件了

動態(tài)引進大概流程

1）一般進頁面可能會調相應的接口拿數(shù)據(jù)，比如訂單詳情接口，該接口返回的數(shù)據(jù)可能有可以區(qū)分業(yè)務來源的字段，比如processNo
2）可以根據(jù)processNo來動態(tài)引進handle.js
3）動態(tài)引進js文件語法：import('./share.js').then(res => {})，res為object，是share.js導出的內容，如果有具名導出為aa和默認導出，則結果為res.default，res.aa

示例代碼如下：

payResult.vue

<template>
  <div>
    <Sahre  :isShow="shareData.isShow" :dataInfo="shareData.dataInfo" @click="shareData.closeEvent"/>
  </div>
</template>
<script>
export default {
  components: {
    // 動態(tài)引進組件
    Share: () => import('./share.vue')
  },
  data() {
    return {
      shareData: {
        isShow: false,         // 控制組件的顯隱,
        dataInfo: {},          // 組件的數(shù)據(jù)
        closeEvent: () => {}   // 組件的關閉事件
      }
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      // 通過接口拿到數(shù)據(jù)，判斷是某服務，serviceName
      let flag1 = serviceName === 'daiJia'
      let flag2 = serviceName === 'battery'
      if (flag1 || flag2) {
        // 這種動態(tài)引進的方式，會返回一個Promise
        import('./share.js').then(res => {
          // share.js是默認導出，所以通過res.default拿到數(shù)據(jù)
          this.shareData = res.default
          // 根據(jù)相應的服務，調用相應的方法
          if (flag1) {
            // 這里要把組件實例傳過去
            this.shareData.getSetDaiJiaData(this)
          } else if (flag2) {
            this.shareData.getSetBatteryData(this)
          }
        })
      }
    }
  }
}
</script>

share.js

export default {
  isShow: false,
  dataInfo: {},
  closeEvent: () => {
    // 注意這里要用箭頭函數(shù)，才能拿到this對象，并且this指向的是該文件導出的內容，即有個default屬性的對象
    // 如果用一般的聲明方式，則this為null
    this.default.isShow = false
  },
  getSetDaiJiaData(vm) {
    // 通過接口那數(shù)據(jù)
    // 這里不能通過this.$store去訪問，需要在調用的地方傳vm進來
    vm.$store.dispatch('').then(res => {
      this.isShow = res.isShow
      this.dataInfo = res.data
    }).catch(err => {
      console.error(err)
    })
  },
  getSetBatteryData(vm) {
    // 通過接口那數(shù)據(jù)
    vm.$store.dispatch('').then(res => {
      this.isShow = res.isShow
      this.dataInfo = res.dataInfo
    }).catch(err => {
      console.error(err)
    })
},
}