Vue 3 defineAsyncComponent 思考

使用 Vue 3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。

什么是defineAsyncComponent

// SOURCE: https://v3.vuejs.org/guide/component-dynamic-async.html
const AsyncComp = defineAsyncComponent(() =>new Promise((resolve, reject) => {resolve({template: '<div>I am async!</div>'})})
) 

defineAsyncComponent 接受一个返回Promise的工厂函数。当我们成功地从服务器获取组件时，这个Promise应该会被 resolve ，如果出现错误则会被 reject 。

要使用它，我们必须从Vue中导入它，然后才能在脚本的其余部分中使用它。

我们也可以使用工厂函数中的 import ，轻松地从其他文件中添加Vue组件。

import { defineAsyncComponent } from "vue" 

// 简单使用
const LoginPopup = defineAsyncComponent(() => import("./components/LoginPopup.vue")) 

这是使用 defineAsyncComponent 的最简单方法，但我们也可以传入一个完整的选项对象，配置几个更高级的参数。

// with options 
const AsyncPopup = defineAsyncComponent({ loader: () => import("./LoginPopup.vue"),loadingComponent: LoadingComponent, /* 在加载时显示 */errorComponent: ErrorComponent, /* 显示是否有错误 */delay: 1000, /* 在显示加载组件之前延迟毫秒 */timeout: 3000 /* 这个毫秒之后的超时 */
}) 

使用defineAsyncComponent延迟加载弹出组件

在本例中，我们将使用一个由单击按钮触发的登录弹出窗口。

每当我们的应用程序加载时，我们不需要我们的应用程序加载此组件，因为只有在用户执行特定操作时才需要它。

所以这就是我们的登录组件的样子，它只是通过用 position: fixed 将屏幕的其余部分涂黑来创建一个弹出窗口，并且有一些输入和一个提交按钮。

<template> <div class="popup"> <div class="content"> <h4> Login to your account </