ホームページ  >  記事  >  ウェブフロントエンド  >  vue3 vite 非同期コンポーネントとルーティングの遅延読み込みを適用する方法

vue3 vite 非同期コンポーネントとルーティングの遅延読み込みを適用する方法

PHPz
PHPz転載
2023-05-18 16:52:143259ブラウズ

1. はじめに

1-1. 3 つの変更:

  • 非同期コンポーネント宣言メソッドの変更: Vue 3.x では、新しい補助関数defineAsyncComponent が追加されています。非同期コンポーネントの宣言を表示するために使用されます

  • 非同期コンポーネントの詳細宣言メソッドのコンポーネント オプションの名前がloaderに変更されました

  • コンポーネントの読み込みローダーによってバインドされた関数は、解決パラメータと拒否パラメータを受け取りません。そして、Promise

1-2 を返す必要があります。補助関数defineAsyncComponentを導入した理由:

Now , Vue 3 では、コンポーネントは純粋な関数として定義される関数のため、非同期コンポーネントの定義は新しいdefineAsyncComponent ヘルパーでラップすることによって明示的に定義する必要があります。

2. Vue 2.x と Vue 3.x 定義の比較

2-1. 非同期コンポーネント/ルーティング定義の比較

  • ##2- 1 -1. Vue 2.x では、次のように非同期コンポーネントを宣言するだけです:

  • const asyncPage = () => import('./views/home.vue')
  • 2-1-2. Vue 3.x では、非同期コンポーネントのインポートには、補助関数defineAsyncComponentを使用した明示的な宣言が必要です。

  • <template>
      <div>
        <h2>Async Components</h2>
        <p>异步组件测试</p>
        <child />
      </div>
    </template>
    <script>
    import { defineAsyncComponent } from &#39;vue&#39;
    const child = defineAsyncComponent(() => import(&#39;@/components/async-component-child.vue&#39;))
    export default {
      name: &#39;async-components&#39;,
      components:{
        &#39;child&#39;: child
      }
    };
    </script>
2-2. 宣言方法の比較

  • 2-2-1. Vue 2 の非同期コンポーネントの宣言.x は、より高度な宣言方法です。次のように:

  • const asyncPageWithOptions  = {
      component: () => import(&#39;./views/home.vue&#39;),
      delay: 200,
      timeout: 3000,
      error: ErrorComponent,
      loading: LoadingComponent
    }
したがって、次の非同期コンポーネント宣言:

const asyncPage = () => import(&#39;./views/home.vue&#39;)

は次と同等です:

const asyncPageWithOptions  = {
  component: () => import(&#39;./views/home.vue&#39;)
}

  • 2- 2 -2. Vue 3.x では、非同期コンポーネントもこのように宣言できます。コンポーネントをローダーに変更するだけで済みます。次のように:

  • const asyncPageWithOptions  = defineAsyncComponent({
      loader: () => import(&#39;./views/home.vue&#39;),
      delay: 200,
      timeout: 3000,
      error: ErrorComponent,
      loading: LoadingComponent
    })
2-3. 非同期コンポーネント読み込み関数は比較を返します

  • 2-3-1. Vue 2.x で受信解決と拒否:

  • // 2.x version
    const oldAsyncComponent = (resolve, reject) => {
      /* ... */
    }
  • 2-3-2.Vue 3.x では常に Promise:

  • // 3.x version
    const asyncComponent = defineAsyncComponent(
      () => new Promise((resolve, reject) => {
          /* ... */
      })
    )
Vue 3.x の非同期コンポーネント読み込み関数は、解決と拒否を受け取らなくなり、常に Promise を返す必要があります。つまり、Vue 3.x では、ファクトリ関数を介して解決コールバックを受信して​​非同期コンポーネントを定義することはサポートされなくなりました。

// 在 Vue 3.x 中不适用
export default {
  components: {
    asyncPage: resolve => require([&#39;@/components/list.vue&#39;], resolve)
  },
}

3. Vue3 の実践

ヒント: Vite ツールを使用してプロジェクトをビルドする場合は、インポートを使用して、ローカル開発中にルーティング遅延ロードを実行します。正常にロードできますが、警告が表示されます。報告される; 本番環境にパッケージ化する 環境によってエラーが報告され、ページが正常に表示されなくなります。これを実現するには、次の 2 つの方法を使用できます。

3-1. ルーティング遅延読み込みの実装

  • 3-1-1.defineAsyncComponent メソッド

  • // router/index.js
    import { defineAsyncComponent } from &#39;vue&#39;
    const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));
    const routes = [
      {
        path: &#39;/async-component&#39;,
        name: &#39;asyncComponent&#39;,
        component: _import(&#39;home&#39;),
      }
    ];
  • 3-1-2.import.meta.glob メソッド

  • // 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件,返回一个对象
    const modules = import.meta.glob(&#39;../views/*/*.vue&#39;);
    const modules ={
        "../views/about/index.vue": () => import("./src/views/about/index.vue")
    }
    // 2.动态导入的时候直接,引用
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        // ...
        {
          path: &#39;xxxx&#39;,
          name: &#39;xxxxx&#39;,
          // 原来的方式,这个在开发中可行,但是生产中不行
          // component: () => import(`../views${menu.file}`),
          // 改成下面这样
          component: modules[`../views${filename}`]
        }
        // ...          
      ],
    })
3-2.非同期コンポーネントの実装

<template>
  <div>
    <h2>Async Components</h2>
    <p>异步组件测试</p>
    <child></child>
  </div>
</template>
<script>
import { defineAsyncComponent } from &#39;vue&#39;
const child = defineAsyncComponent(() => import(&#39;@/components/async-component-child.vue&#39;))
export default {
  name: &#39;async-components&#39;,
  components:{
    &#39;child&#39;: child
  }
};
</script>

以上がvue3 vite 非同期コンポーネントとルーティングの遅延読み込みを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。