在Vue.js中使用defineAsyncComponent延迟加载组件

.popup{position:fixed;宽度：100%；顶部：;左边：;高度：100%；背景色：rgba(,,,0.2);显示：弹性；证明内容：居中；对齐项目：居中；}.content{最小宽度：200px；宽度：30%；背景：#fff；高度：200px；填充：10px；border-radius:5px;}input[type="text"],input[type="password"]{border:;大纲：;border-bottom:1pxsolid#eee;宽度：80%；保证金：自动；font-size:0.5em;}button{边框:;顶部边距：50px；背景颜色：#8e44ad；颜色：#fff；填充：5px10px；font-size:0.5em;}使用Vue3的defineAsyncComponent功能可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是改善初始页面加载的好方法，因为我们的应用程序将以较小的块加载，而不必在页面加载时加载每个组件。在本教程中，我们将了解defineAsyncComponent的全部内容，并查看一个示例，该示例将弹出窗口的加载延迟到我们的应用程序需要它时。好吧，让我们开始吧。什么是defineAsyncComponent//来源：https://v3.vuejs.org/guide/component-dynamic-async.htmlconstAsyncComp=defineAsyncComponent(()=>newPromise((resolve,reject)=>{resolve({template:'

'})}))defineAsyncComponent采用返回Promise的工厂函数。当我们从服务器成功获取组件时，这个Promise应该resolve，如果有错误则reject。要使用它，我们必须先从Vue导入它，然后才能在脚本的其余部分使用它。我们还可以使用工厂函数中的导入轻松地从其他文件添加Vue组件。import{defineAsyncComponent}from"vue"//简单使用constLoginPopup=defineAsyncComponent(()=>import("./components/LoginPopup.vue"))这是使用defineAsyncComponent最简单的方式，但是我们也可以传入一个一个完整的选项对象，配置几个更高级的参数。//withoptionsconstAsyncPopup=defineAsyncComponent({loader:()=>import("./LoginPopup.vue"),loadingComponent:LoadingComponent,/*加载时显示*/errorComponent:ErrorComponent,/*显示是否有错误*/delay:1000,/*在显示加载的组件之前延迟毫秒*/timeout:3000/*在此毫秒后超时*/})就个人而言，我发现自己更经常使用第一种较短的语法，它适用于我的大部分用例，但这完全取决于您。就这么简单，让我们进入我们的例子。使用defineAsyncComponent延迟加载弹出组件在此示例中，我们将使用通过单击按钮触发的登录弹出窗口。我们不需要每次应用程序加载时都加载此组件，因为只有在用户执行特定操作时才需要它。所以这就是我们的登录组件的样子，它只是通过用position:fixed遮住屏幕的其余部分来创建一个弹出窗口，并且有一些输入和一个提交按钮。.popup{position:fixed;宽度：100%；顶部：;左边：;高度：100%；背景色：rgba(,,,0.2);显示：弹性；证明内容：居中；对齐项目：居中；}.content{最小宽度：200px；宽度：30%；背景：#fff；高度：200px；填充：10px；border-radius:5px;}input[type="text"],input[type="password"]{border:;大纲：;border-bottom:1pxsolid#eee;宽度：80%；保证金：自动；font-size:0.5em;}button{边框:;顶部边距：50px；背景颜色：#8e44ad；颜色：#fff；填充：5px10px；font-size:0.5em;}但不像我们平常像这样导入它并将其包含在我们的组件选项中if="show"/>import{defineAsyncComponent}from'vue'exportdefault{components:{"LoginPopup":defineAsyncComponent(()=>import('./components/LoginPopup.vue')},data(){return{show:false}}}虽然这在我们使用我们的应用程序时可能看起来是一样的，但让我们检查Elements>Networks以了解这个小而重要的区别.如果我们不使用defineAsyncComponent，我们将看到我们的应用程序在页面加载后从服务器获取LoginPopup.vue。虽然这可能不是这个例子中最大的性能问题，但它仍然会减慢加载速度，如果我们有几十个组件这样做，它真的可以加起来。但是，如果我们使用defineAsyncComponent查看同一个选项卡，我们会注意到当我们的页面加载时，LoginPopup.vue消失了，因为它还没有加载。但是一旦我们点击我们的按钮并告诉我们的应用程序显示我们的弹出窗口，此时它从服务器加载并且我们可以在网络选项卡中看到它。这有助于我们实现最佳性能。我们只想在页面的初始加载时加载所需的组件。我们的页面加载时通常不需要条件渲染的组件，那么为什么要让我们的应用程序加载它们呢？如何使用异步设置功能无论我们是否使用defineAsyncComponent进行延迟加载，任何具有异步设置功能的组件都必须用包裹。简而言之，创建异步设置函数是让我们的组件在渲染之前等待某些API调用或其他异步操作的一个选项。这是我们具有异步设置的组件。它使用setTimeout()模拟API调用。我们可以在我们的ImportLoginPopupfrom'./components/LoginPopup.vue'incomponent//或constLoginPopup=defineAsyncComponent(()=>import("./components/LoginPopup.vue"))但是如果我们希望它在我们的模板中呈现，我们需要将它包装在一个Suspense元素中，该元素将等待我们的设置函数解析，然后再尝试呈现我们的组件。

正在加载...

这是结果。用户看到“正在加载...”，然后在3秒后（我们的setTimeout的硬编码值），我们将呈现。默认情况下，我们的所有组件defineusingdefineAsyncComponent是可挂起的。这意味着如果一个组件在其父链中有Suspense，它将被视为该Suspense的异步依赖。我们的组件load、error、delay和timeout选项将被忽略，而由Suspense处理。最后一个想法defineAsyncComponent在创建具有几十个组件的大型项目时是有益的。当我们进入延迟加载组件时，我们可以有fas缩短页面加载时间，改善用户体验，并最终提高应用程序的保留率和转化率。我想知道您对此功能的看法。如果您已经在您的应用程序中使用它，请在下面的评论中告诉我。