组件懒加载的实现方式

<template>
  <div class="l1">
    <button @click="changeCom('first')">组件1</button>
    <button @click="changeCom('second')">组件2</button>
    <button @click="changeCom('third')">组件3</button>
    <component :is="getActiveCom"></component>
  </div>
</template>

<script>
const a1 = ()=>import('./lazycom/a.vue')
const b1 = ()=>import('./lazycom/b.vue')
const c1 = ()=>import('./lazycom/c.vue')
export default {
  props: {},
  data() {
    return {
      activeCom: a1,
    };
  },
  methods: {
    changeCom(v) {
      //   console.log(v);
      switch (v) {
        case "first":
          this.activeCom = a1;
          break;
        case "second":
          this.activeCom = b1;
          break;
        case "third":
          this.activeCom = c1;
          break;

        default:
          break;
      }
    },
  },
 
  computed: {
    getActiveCom() { 
        console.log(22);
        return this.activeCom
    },
  },
};
</script>