Vue3 で非同期コンポーネントdefineAsyncComponentAPIを使用する方法

ファクトリ関数をパラメータとして渡す

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>

ここで、edd05d9b720c954eda8df66606fc7d41 コンポーネントを非同期コンポーネントに変更します。 サンプル コードは次のとおりです。

<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>

edd05d9b720c954eda8df66606fc7d41 コンポーネントは、 2秒後にロードされます。

オブジェクトの種類をパラメータとして渡す

defineAsyncComponentメソッドはオブジェクトをパラメータとして受け取ることもできます。オブジェクトには次のパラメータがあります:

• loader: ファクトリ関数と同じ;

• loadingComponent: 非同期コンポーネントのロード時に表示されるコンポーネント;

• errorComponent: コンポーネントのロードに失敗したときに表示されるコンポーネント;

• lay: loadingComponent を表示します 前回の遅延時間 (ミリ秒単位) のデフォルトは 200 ミリ秒です;

• ##timeout: timeout が指定されている場合とロードにかかる時間コンポーネントが値を設定すると、エラー コンポーネントが表示されます。デフォルト値は Infinity (ミリ秒単位);

• suspensible:非同期コンポーネントは終了bb06e69d307cb52103d07d8f9dd385e5Controlを終了し、常に独自の読み込みステータスを制御できます。

• onError: 4 つのパラメータ、つまり error、retry、fail## を含む関数# と attempts、これら 4 つのパラメーターは、エラー オブジェクト、再ロードされた関数、ローダーを終了する関数、および再試行回数です。

次のコードは、

defineAsyncComponent

メソッドのオブジェクト タイプ パラメーターの使用法を示しています。 <pre class="brush:js;">&lt;template&gt; &lt;logo-img /&gt; &lt;hello-world msg=&quot;Welcome to Your Vue.js App&quot; /&gt; &lt;/template&gt; &lt;script setup&gt; import { defineAsyncComponent } from &amp;#39;vue&amp;#39; import LogoImg from &amp;#39;./components/LogoImg.vue&amp;#39; import LoadingComponent from &amp;#39;./components/loading.vue&amp;#39; import ErrorComponent from &amp;#39;./components/error.vue&amp;#39; // 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选 const time = (t, callback = () =&gt; {}) =&gt; { return new Promise(resolve =&gt; { setTimeout(() =&gt; { callback() resolve() }, t) }) } // 记录加载次数 let count = 0 const HelloWorld = defineAsyncComponent({ // 工厂函数 loader: () =&gt; { return new Promise((resolve, reject) =&gt; { ;(async function () { await time(300) const res = await import(&amp;#39;./components/HelloWorld.vue&amp;#39;) if (++count &lt; 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 &lt; 3) { // 请求发生错误时重试，最多可尝试 3 次 console.log(attempts) retry() } else { fail() } }, }) &lt;/script&gt;</pre>

上記のコードでは、コンポーネントをロードします。エラーが 2 回要求され、3 回目のロードのみが成功します。

ロードが失敗した場合は、ErrorComponent コンポーネントが表示されます。

以上がVue3 で非同期コンポーネントdefineAsyncComponentAPIを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。