给多个异步组件提供一个统一的状态管理

使用前，有两个loading...

vue3内置组件Suspense_javascript

使用后， 只有一个loading...

vue3内置组件Suspense_vue.js_02

vue3内置组件Suspense_javascript_03

Index.vue:

<script setup lang="ts">
import { onMounted, ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import Header from './Header.vue'
import LoadingComponent from './LoadingComponent.vue'
import ErrorComponent from './ErrorComponent.vue'
// import List from './List.vue'
// const List = defineAsyncComponent(() => import('./List.vue'))

// const List = defineAsyncComponent(() => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       let temp = import('./List.vue')
//       resolve(temp as never)
//     }, 2000)
//   })
// })

const List = defineAsyncComponent({
  loader: () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let temp = import('./List.vue')
        resolve(temp as never)
      }, 1000)
    })
  },
  loadingComponent: LoadingComponent,
  delay: 200,
  errorComponent: ErrorComponent,
  timeout: 3000,
})

const router = useRouter()
const handleJump = (path: any) => {
  router.push(path)
}
onMounted(() => {})
</script>

<template>
  <div>
    <Suspense>
      <div>
        me
        <button @click="() => handleJump('/home')">home</button>
        <Header></Header>
      </div>

      <template #fallback>
        <div>loading...</div>
      </template>
    </Suspense>
    <List></List>
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.

Header.vue:

<script setup lang="ts">
let res: any = { count: 0 }
res = await new Promise((resolve) => {
  setTimeout(() => {
    resolve({ count: 1 })
  }, 2000)
})
console.log('res', res)
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>header {{ res.count }}</div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

List.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>
    list
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

LoadingComponent.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>loading...</div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

官方文档

 https://cn.vuejs.org/guide/built-ins/suspense.html

vue3内置组件Suspense_前端_04