Logintoyouraccount
Iamasync!'})}))defineAsyncComponent可以接受一个返回的Promise工厂功能。Promise的resolve回调应该在服务端返回组件定义后调用。您还可以调用reject(reason)来指示加载失败。defineAsyncComponent可以从vue导入并使用：import{defineAsyncComponent}from"vue"//简单用法constLoginPopup=defineAsyncComponent(()=>import("./components/LoginPopup.vue"))这是最简单的defineAsyncComponent方法,对于高级用法，defineAsyncComponent可以接受一个对象：constAsyncPopup=defineAsyncComponent({loader:()=>import("./LoginPopup.vue"),//加载异步组件时要使用的组件loadingComponent:LoadingComponent,//加载失败时使用的组件errorComponent:ErrorComponent,//显示loadingComponent之前的延迟|默认值：200（毫秒）delay:1000,//如果提供超时，加载组件的时间超过设置值,会显示错误组件//Defaultvalue:Infinity(即永不超时,单位ms)timeout:3000})基础介绍完了，接下来，我们来打个例子。使用defineAsyncComponent异步加载Popup组件在本例中，我们将使用通过单击按钮触发的登录弹出窗口。我们不需要我们的应用程序在每次加载时都加载此组件，因为只有在用户执行特定操作时才需要它。下面是登录组的实现：//LoginPopup.vueLogintoyouraccount
LoadedAPI:{{article}}
Loading...
下面是运行结果，你会看到“Loading...”，然后3秒后（硬编码值ofsetTimeout)组件将呈现。默认情况下，我们使用defineAsyncComponent定义的所有组件都是Suspenseable。这意味着如果一个组件在其父链中有Suspense，它将被视为该Suspense的异步依赖。我们组件的加载、错误、延迟和超时选项将被忽略，并由Suspense处理。总结defineAsyncComponent在构建包含许多组件的大型项目时很有用。当我们使用延迟加载组件时，我们可以更快地加载页面，改善用户体验，并最终提高应用保留率和转化率。我很想知道每个人对这个功能的看法。如果您已经在您的应用中使用它，请记得在下面的评论中分享它。~最后，我是小智，我今天要干嘛呢~代码部署后可能存在的bug，无法实时知道。之后为了解决这些bug，我花了很多时间在日志调试上。顺便给大家推荐一个很好用的BUG监控工具Fundebug。原文：https://learnvue.co/2021/06/l...与梦想交流，干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗小智。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。