学习了 Vue defineAsyncComponent Api，它教给我这些知识？(2)

width: 30%;

background: #fff;

height: 200px;

padding: 10px;

border-radius: 5px;

}

input[type=“text”], input[type=“password”] {

border: ;

outline: ;

border-bottom: 1px solid #eee;

width: 80%;

margin: auto;

font-size: 0.5em;

}

button {

border: ;

margin-top: 50px;

background-color:#8e44ad;

color: #fff;

padding: 5px 10px;

font-size: 0.5em;

}

在其它组件中导入它：

<button @click=“show = true”> Login

我们可以使用 defineAsyncComponent，只在需要的时候加载它（按钮被点击时使用v-if来切换）。

<button @click=“show = true”> Login

这个用法看起来和上面的差不多，不急，我们 F12 打开控制台。

如果我们不使用defineAsyncComponent，一旦我们的页面加载，我们就会看到我们的应用程序从服务器上获得LoginPopup.vue。虽然在这个例子中，性能问题不那么严重，但如果我们有几十个组件这样做，性能上多多少少还是有影响的。

然而，如果我们使用defineAsyncComponent查看同一个标签，会注意到，当我们的页面加载时，LoginPopup.vue是没有的，这是因为它还没有被加载。

但，如果切换按钮，我们就可以看到它了：

这有助于我们实现最佳性能。我们只想在我们的页面初始加载时加载需要的组件。有条件渲染的组件在我们的页面加载时往往是不需要的，所以为什么要让我们的应用程序加载它们呢？

如何与异步的 setup 方法一起使用？

不管我们是否用defineAsyncComponent来异步加载，任何具有异步 setup 方法的组件都必须用<Suspense>来包装。

简而言之，创建一个异步 setup 函数是我们的一种选择，可以让我们的组件在渲染前等待一些API 调用或其他异步操作。

下面是带有异步setup的组件，使用setTimeout()模拟API调用

Loaded API: {{ article }}

Login to your account

Log in

我们可以使用或不使用defineAsyncComponent将它导入到组件中:

import LoginPopup from ‘./components/LoginPopup.vue’

// OR

const LoginPopup = defineAsyncComponent(() => import(“./components/LoginPopup.vue”))

但如果我们想让它在我们的模板中渲染，我们需要把它包在一个Suspense元素中。这将等待我们的setup 解析后，然后再尝试渲染我们的组件。

Suspense的一个很好的特点是，我们可以使用槽和模板显示回退内容。回退内容将显示，直到setup函数解析，我们的组件准备好渲染。 请注意，v-if已经从组件本身移到了我们的Suspense 组件上，所以所有回退内容都会显示。

<button @click=“show = true”> Login

<template #default>

<template #fallback>

Loading...

下面是运行结果，会看到 "Loading…"，然后在3秒后(setTimeout的硬编码值）组件渲染。

默认情况下，我们使用defineAsyncComponent定义的所有组件都是可Suspense的。

这意味着如果一个组件的父链中有Suspense，它将被视为该Suspense的一个异步依赖。我们的组件的加载、错误、延迟和超时选项将被忽略，而是由Suspense来处理。

总结

当构建包许多组件的大型项目时，defineAsyncComponent是非常有用的。当我们使用懒加载组件时，可以更快地加载页面，改善用户体验，最终提高应用的留存率和转换率。

我很想知道大家对这个特性的看法。如果你已经在你的应用中使用它了，记得下面留言分享一下哦。

完，我是小智，今天准备去干点啥~

---

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://learnvue.co/2021/06/lazy-load-components-in-vue-with-defineasynccomponent/

交流

---

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
-n6gnyQdr-1715232805453)]

[外链图片转存中…(img-t8otALEM-1715232805454)]

[外链图片转存中…(img-iVR2fkbn-1715232805454)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！