Vue3 で非同期コンポーネントdefineAsyncComponentAPIを使用する方法-Vue.js-php.cn

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

WBOY

リリース： 2023-05-21 20:43:04

転載

1008 人が閲覧しました

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

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>

ログイン後にコピー

<hello-world> コンポーネントは、 2秒後にロードされます。

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

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

loader: ファクトリ関数と同じ;
loadingComponent: 非同期コンポーネントのロード時に表示されるコンポーネント;
errorComponent: コンポーネントのロードに失敗したときに表示されるコンポーネント;
lay: loadingComponent を表示します 前回の遅延時間 (ミリ秒単位) のデフォルトは 200 ミリ秒です;
##timeout: timeout が指定されている場合とロードにかかる時間コンポーネントが値を設定すると、エラーコンポーネントが表示されます。デフォルト値は Infinity (ミリ秒単位);
suspensible:非同期コンポーネントは終了Controlを終了し、常に独自の読み込みステータスを制御できます。
onError: 4 つのパラメータ、つまり error、retry、fail## を含む関数# と attempts、これら 4 つのパラメーターは、エラーオブジェクト、再ロードされた関数、ローダーを終了する関数、および再試行回数です。

defineAsyncComponent

メソッドのオブジェクトタイプパラメーターの使用法を示しています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><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></pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、コンポーネントをロードします。エラーが 2 回要求され、3 回目のロードのみが成功します。<p>ロードが失敗した場合は、<strong>ErrorComponent</strong> コンポーネントが表示されます。 <code>

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