Vue 核心知识：异步组件和加载时机

原创

专家一百锦再 2025-01-06 22:46:28 ©著作权

文章标签 vue.js 前端框架 javascript 组合式前端 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者专家一百锦再的原创作品，请联系作者获取转载授权，否则将追究法律责任

让我们一起走向未来
🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

Vue 核心知识：异步组件和加载时机_前端_02

1. 异步组件的基本用法

Vue 核心知识：异步组件和加载时机_vue.js_04

异步组件通过 defineAsyncComponent 来定义，并可以与 Vue 的 Suspense 组件结合使用，处理异步加载的状态（如加载中、错误等）。

示例：定义异步组件

<template>
  <div>
    <button @click="toggleComponent">加载组件</button>
    <suspense>
      <template #default>
        <async-component v-if="showComponent" />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showComponent = ref(false)

const toggleComponent = () => {
  showComponent.value = !showComponent.value
}

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

在这个示例中：

当点击按钮时，showComponent 会切换，决定是否显示 AsyncComponent。
defineAsyncComponent 用于异步加载组件，组件只有在需要时才会被加载。

2. 异步组件的加载时机

Vue 核心知识：异步组件和加载时机_前端框架_05

异步组件的加载时机取决于以下几种情况：

初次渲染时：如果组件被包裹在 v-if 或其他控制渲染条件中，它会等到渲染到页面时才会被加载。
路由视图中：如果你使用 Vue Router，异步组件通常会在路由匹配时才会加载，类似于懒加载路由组件。
动态条件渲染时：当使用 v-if 或其他条件渲染时，异步组件会在条件为 true 时加载。

3. 与 `v-if` 一起使用的异步组件

v-if 会在条件为 true 时创建和渲染异步组件，从而触发异步加载。

示例：`v-if` 控制异步组件加载

<template>
  <div>
    <button @click="toggleComponent">加载异步组件</button>
    <suspense>
      <template #default>
        <async-component v-if="showComponent" />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showComponent = ref(false)

const toggleComponent = () => {
  showComponent.value = !showComponent.value
}

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

在这个示例中，当点击按钮时，showComponent 会切换为 true，触发 v-if 渲染 async-component，此时 AsyncComponent 会异步加载。

4. 使用 `defineAsyncComponent` 定义异步组件

Vue 核心知识：异步组件和加载时机_前端_06

你可以使用 defineAsyncComponent 来定义异步组件，defineAsyncComponent 接受一个返回 Promise 的函数，该 Promise 会解析为组件。

示例：`defineAsyncComponent` 用法

<template>
  <div>
    <button @click="toggleComponent">显示异步组件</button>
    <suspense>
      <template #default>
        <async-component v-if="showComponent" />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showComponent = ref(false)

const toggleComponent = () => {
  showComponent.value = !showComponent.value
}

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  loadingComponent: () => <div>加载中...</div>, // 显示的加载组件
  errorComponent: () => <div>加载失败</div>,  // 错误显示组件
  delay: 200,   // 延迟时间，单位毫秒
  timeout: 3000 // 超时时间，单位毫秒
})
</script>

在这个例子中，defineAsyncComponent 定义了异步组件的加载过程：

loader：加载函数，返回一个 Promise，它会被解析为组件。
loadingComponent：当组件加载时显示的占位组件。
errorComponent：加载失败时显示的组件。
delay：设置延迟时间，在组件加载时延迟展示 loadingComponent，防止立即显示加载状态。
timeout：设置超时时间，如果组件加载超时，显示 errorComponent。

5. 路由视图中的异步组件

Vue 核心知识：异步组件和加载时机_组合式_07

Vue Router 也支持异步加载组件。你可以在定义路由时使用异步组件，Vue 会在路由切换时懒加载组件。

示例：Vue Router 中的异步组件

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/home',
    component: defineAsyncComponent(() => import('./views/Home.vue'))
  },
  {
    path: '/about',
    component: defineAsyncComponent(() => import('./views/About.vue'))
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这个例子中，Home 和 About 组件是异步加载的，只有当用户访问这些路由时，Vue 才会加载相应的组件。

6. 异步组件加载的时机和性能优化

首次加载时：如果异步组件没有被缓存，每次组件渲染时都需要加载。为了优化性能，你可以使用 Vue 的缓存机制，或者将多个组件打包成一个 bundle。
延迟加载：使用 defineAsyncComponent 时，可以设置 delay 属性来延迟显示加载状态，以便在组件加载较快时不会频繁地显示加载提示。
超时处理：设置 timeout 来防止组件加载时间过长，用户体验不好时可以显示错误信息。