Vue3에서 비동기 컴포넌트 정의AsyncComponentAPI를 사용하는 방법

팩토리 함수를 매개변수로 전달

defineAsyncComponent 메서드는 기본 사용법으로 팩토리 함수를 수신합니다. 이 팩토리 함수는 Promise, Promise를 반환해야 합니다. code> <code>resolve는 구성요소를 반환해야 합니다. defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import LogoImg from &#39;./components/LogoImg.vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
</script>

现在我们就将<hello-world>组件修改为异步组件，示例代码如下：

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;

// 简单用法
const HelloWorld = defineAsyncComponent(() =>
  import(&#39;./components/HelloWorld.vue&#39;),
)
</script>

我们这里为了看到效果，将import延迟执行，示例代码如下：

<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 定义异步组件，这里这样写是为了查看效果
const HelloWorld = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    ;(async function () {
      try {
        await time(2000)
        const res = await import(&#39;./components/HelloWorld.vue&#39;)
        resolve(res)
      } catch (error) {
        reject(error)
      }
    })()
  })
})
</script>

当2s后才会加载<hello-world>组件。

传递对象类型作为参数

defineAsyncComponent方法也可以接收一个对象作为参数，该对象中有如下几个参数：

• loader：同工厂函数；

• loadingComponent：加载异步组件时展示的组件；

• errorComponent：加载组件失败时展示的组件；

• delay：显示loadingComponent之前的延迟时间，单位毫秒，默认200毫秒；

• timeout：如果提供了timeout，并且加载组件的时间超过了设定值，将显示错误组件，默认值为Infinity（单位毫秒）；

• suspensible：异步组件可以退出<Suspense>控制，并始终控制自己的加载状态。

• onError：一个函数，该函数包含4个参数，分别是error、retry、fail和attempts，这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。

如下代码展示defineAsyncComponent方法的对象类型参数的用法：

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>
<script setup>
import { defineAsyncComponent } from &#39;vue&#39;
import LogoImg from &#39;./components/LogoImg.vue&#39;
import LoadingComponent from &#39;./components/loading.vue&#39;
import ErrorComponent from &#39;./components/error.vue&#39;

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 记录加载次数
let count = 0
const HelloWorld = defineAsyncComponent({
  // 工厂函数
  loader: () => {
    return new Promise((resolve, reject) => {
      ;(async function () {
        await time(300)
        const res = await import(&#39;./components/HelloWorld.vue&#39;)
        if (++count < 3) {
          // 前两次加载手动设置加载失败
          reject(res)
        } else {
          // 大于3次成功
          resolve(res)
        }
      })()
    })
  },
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 0,
  timeout: 1000,
  suspensible: false,
  onError(error, retry, fail, attempts) {
    // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
    // 必须调用其中一个才能继续错误处理。
    if (attempts < 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      console.log(attempts)
      retry()
    } else {
      fail()
    }
  },
})
</script>

上面的代码中，我们加载组件时前两次会请求错误，只有第三次加载才会成功，如果加载失败则会展示ErrorComponent

Vue Cli로 만든 프로젝트를 예로 들어 보겠습니다. 여기서는 헤드 이미지를 약간 수정하여 구성 요소로 분할했습니다.🎜rrreee🎜이제 <hello-world> 구성 요소가 비동기 구성 요소로 수정되었습니다. 샘플 코드는 다음과 같습니다.🎜rrreee🎜효과를 확인하기 위해 import ,샘플 코드는 다음과 같습니다.🎜rrreee🎜 <hello-world> 구성 요소는 2초 후에 로드됩니다. 🎜🎜개체 유형을 매개변수로 전달🎜🎜defineAsyncComponent 메서드는 개체를 매개변수로 받을 수도 있습니다. 🎜

• 🎜loader: 팩토리 기능과 동일 🎜
• 🎜loadingComponent: 비동기 구성요소를 로드할 때 표시되는 구성요소 🎜
• 🎜 errorComponent: 구성 요소를 로드할 때 표시되는 구성 요소 🎜
• 🎜delay: loadingComponent를 표시하기 전의 지연 시간. >, 단위 밀리초, 기본값 200밀리초; 🎜
• 🎜timeout: timeout이 제공되고 구성 요소를 로드하는 시간이 설정된 값을 초과하는 경우 오류가 표시됩니다. 구성 요소, 기본값은 무한대(단위: 밀리초)입니다. 🎜
• 🎜suspensible: 비동기 구성 요소는 를 종료할 수 있습니다. <서스펜스>로드 상태를 제어하고 항상 제어하세요. 🎜
• 🎜onError: 4개의 매개변수, 즉 error, retry, fail를 포함하는 함수 code> 및 시도에서 이 네 가지 매개변수는 오류 개체, 다시 로드된 함수, 로더를 종료하는 함수, 재시도 횟수입니다. 🎜

🎜다음 코드는 defineAsyncComponent 메서드의 객체 유형 매개변수 사용법을 보여줍니다. 🎜rrreee🎜위 코드에서 구성 요소를 로드할 때, 처음 두 번은 요청 오류가 발생하고 세 번째 로드만 성공합니다.로드가 실패하면 ErrorComponent 구성 요소가 표시됩니다. 🎜

위 내용은 Vue3에서 비동기 컴포넌트 정의AsyncComponentAPI를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!