详解

• 异步组件是我们在需要的时候才加载组件，而不是在应用启动时就加载所有的组件。
• 好处：这样可以加快应用的加载速度，提高用户体验。

Suspense组件

• Suspense组件是Vue3.0新增的组件，用于处理异步组件。
• Suspense组件有两个插槽，default插槽用于显示默认内容，fallback插槽用于显示加载中的内容。
• Suspense组件的默认内容是异步组件，fallback插槽的内容是加载中的内容。

使用

• 简单案例

<template>
  <AsyncComponent />
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
// 定义异步组件,引入指定vue文件,并使用defineAsyncComponent包裹
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
</script>

• 复杂案例

<template>
  <AsyncComponent />
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
// 定义异步组件,引入指定vue文件,并使用defineAsyncComponent包裹
const AsyncComponent = defineAsyncComponent({
  // 加载组件时使用的组件
  loadingComponent: LoadingComponent,
  // 出错时使用的组件
  errorComponent: ErrorComponent,
  // 定义组件加载时使用的函数
  loader: () => import('./AsyncComponent.vue'),
  // 加载组件的超时时间
  timeout: 3000,
  // 定义组件加载时的延迟时间
  delay: 200
})
</script>

VUE3.5+ 新增惰性激活

• 异步组件可以通过提供激活策略来控制何时进行激活。

在空闲时进行激活

import { defineAsyncComponent, hydrateOnIdle } from 'vue'
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnIdle(/* 传递可选的最大超时 */)
})

元素变为可见时进行激活

import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  // rootMargin: '100px' 表示当元素距离视口100px时进行激活
  hydrate: hydrateOnVisible({ rootMargin: '100px' })
})

在媒体查询匹配时进行激活

import { defineAsyncComponent, hydrateOnMediaQuery } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  // maxWidth: 500px 表示当视口宽度小于等于500px时进行激活
  hydrate: hydrateOnMediaQuery('(max-width:500px)')
})

交互时激活

import { defineAsyncComponent, hydrateOnInteraction } from 'vue'
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  // click 表示在点击时进行激活
  // ['click', 'hover'] 表示在点击和悬停时进行激活
  hydrate: hydrateOnInteraction('click')
})

自定义激活策略

import { defineAsyncComponent, type HydrationStrategy } from 'vue'

const myStrategy: HydrationStrategy = (hydrate, forEachElement) => {
  // forEachElement 是一个遍历组件未激活的 DOM 中所有根元素的辅助函数，
  // 因为根元素可能是一个模板片段而非单个元素
  forEachElement(el => {
    // ...
  })
  // 准备好时调用 `hydrate`
  hydrate()
  return () => {
    // 如必要，返回一个销毁函数
  }
}
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: myStrategy
})