异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积

这时候就可以使用异步组件

  • 异步组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
      <div>{{ret}}</div>
    </template>

    <script lang="ts" setup>
    let promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('异步事件成功')
      }, 3000)
    })

    let ret = await promise
    console.log(ret)
    </script>

    <style scoped>

    </style>

  • 父组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
      <div class="menu">
        Menu
        <Suspense>
          <template #default>
            <async></async>
          </template>

          <template #fallback>
            <div>loading...</div>
          </template>
        </Suspense>
      </div>
    </template>

    <script setup lang="ts">
    	import {defineAsyncComponent} from "vue";
    	const async = defineAsyncComponent(() => import('../../components/async.vue'))
    </script>

其他写法：https://blog.csdn.net/m0_60721514/article/details/123304635