vue组件异步动态加载

当页面过大引用的组件过多，或者想要优化下页面的加载速度时可以考虑把之前的一次性引入组件的方式改成动态按需引入.

1.组件引入到页面中但未加载

const lazyChangeGeographicLocation = () => import('@/components/addrChooseList/components/change-geographic-location.vue')

2.v-if默认隐藏组件，首次进入不渲染

  <lazy-change-geographic-location v-if='showChooseLoaction' :isShowBack="true" @onHide="onHide" @closeAndBack="closeAndBack" @handleLocation="handleGeoLocation" />

3.当需要组件加载并渲染时执行第一步定义的方法，回调中控制组件的展示属性

  data () {
    return {
      showChooseLoaction: false,
      addrLoad: false  // 加载状态，控制是否加载组件，当需要渲染组件时提前改为true
    }
  },

   otherLocationOption() {
      if (!this.addrLoad) {
        lazyChangeGeographicLocation().then(() => {
          this.addrLoad = true;
          this.addrListShow = false
          this.showChooseLoaction = true
        })
        return;
      }
      this.addrListShow = false
      this.showChooseLoaction = true
    },

一般是默认进入时v-if控制完全不渲染，当第一次渲染成功后就没必要在用v-if隐藏掉，保留在内存中一直调用即可