vue3异步组件_人工智能

vue3异步组件_人工智能_02

vue3异步组件_vue.js_03

同步组件引入方式

import List from './List.vue'
  • 1.

异步组件引入方式

import { onMounted, ref, defineAsyncComponent } from 'vue'
const List = defineAsyncComponent(() => import('./List.vue'))
  • 1.
  • 2.

手动给异步组件加延时

const List = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let temp = import('./List.vue')
      resolve(temp as never)
    }, 2000)
  })
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

手动给异步组件加延时，并模拟测试各种流程

const List = defineAsyncComponent({
  loader: () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let temp = import('./List.vue')
        resolve(temp as never)
      }, 4000)
    })
  },
  loadingComponent: LoadingComponent,
  delay: 200,
  errorComponent: ErrorComponent,
  timeout: 3000,
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

vue3异步组件_人工智能_04

Inde.vue:

<script setup lang="ts">
import { onMounted, ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
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)
      }, 4000)
    })
  },
  loadingComponent: LoadingComponent,
  delay: 200,
  errorComponent: ErrorComponent,
  timeout: 3000,
})

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

<template>
  <div>
    me
    <button @click="() => handleJump('/home')">home</button>
    <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.

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.

ErrorComponent.vue:

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

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

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

官方教程

 https://cn.vuejs.org/guide/components/async.html

vue3异步组件_javascript_05