当前位置：首页 > VUE

vue 实现异步加载

2026-01-14 03:42:00VUE

Vue 异步加载的实现方法

动态导入组件（懒加载）

使用 import() 语法动态导入组件，Vue 会将其转换为异步加载的组件。适用于路由或组件按需加载。

const AsyncComponent = () => import('./AsyncComponent.vue')

路由配置示例：

const router = new VueRouter({
  routes: [
    {
      path: '/async',
      component: () => import('./AsyncPage.vue')
    }
  ]
})

Vue 的 `defineAsyncComponent`

Vue 3 提供了 defineAsyncComponent 方法，支持更灵活的异步组件定义：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return import('./AsyncComponent.vue')
})

可配置加载状态和错误处理：

const AsyncComp = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200, // 延迟显示加载状态
  timeout: 3000 // 超时时间
})

结合 Suspense 使用（Vue 3）

Vue 3 的 <Suspense> 组件可以管理嵌套异步依赖的加载状态：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./AsyncComponent.vue')
    )
  }
}
</script>

异步数据加载

在组件生命周期中异步获取数据：

export default {
  data() {
    return {
      posts: []
    }
  },
  async created() {
    this.posts = await fetch('/api/posts').then(res => res.json())
  }
}

或者使用 setup 语法（Vue 3）：

import { ref } from 'vue'

export default {
  setup() {
    const posts = ref([])

    const loadData = async () => {
      posts.value = await fetch('/api/posts').then(res => res.json())
    }

    loadData()

    return { posts }
  }
}