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

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を使用した明示的な宣言が必要です。

ログイン後にコピー

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

const asyncPageWithOptions = { component: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent }

ログイン後にコピー

const asyncPage = () => import('./views/home.vue')

const asyncPageWithOptions = { component: () => import('./views/home.vue') }

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

const asyncPageWithOptions = defineAsyncComponent({ loader: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent })

ログイン後にコピー

• 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 中不适用 export default { components: { asyncPage: resolve => require(['@/components/list.vue'], resolve) }, }

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

// router/index.js import { defineAsyncComponent } from 'vue' const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`)); const routes = [ { path: '/async-component', name: 'asyncComponent', component: _import('home'), } ];

ログイン後にコピー

• 3-1-2.import.meta.glob メソッド

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

ログイン後にコピー

ログイン後にコピー

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