作者:Matt Maribojoc
译者:前端小智
来源:stackabuse
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
懒加载组件是一种改善应用程序用户体验的简便方法,尤其是在我们的代码包很大或用户连接速度较慢的情况下。
Vue3引入了一些新功能,可通过改进异步组件API和新的Suspense
组件来帮助我们实现友好的用户体验。
用户访问应用程序时,无需立即加载UI的某些部分,例如,诸如模态框和工具提示之类的动态UI功能。此外,如果我们使用的是单页面应用程序体系结构,则页面上的内容 看不见的页面也不应加载,直到需要为止。
在此示例应用程序中,我们的应用程序显示一个ChatWindow
组件,如果用户经过身份验证,该组件将加载。
我们假设只能在运行时确定身份验证,并且该组件很大。 由于这些原因,我们需要要懒加载它。
<template>
<h3>Chat with friends here</h3>
<chat-window v-if="auth" />
</template>
<script>
import ChatWindow from "@/components/ChatWindow";
export default {
components: {
ChatWindow
},
...
}
</script>
Vue 3引入了defineAsyncComponent
API,所以实现懒加载组件是非常简单的。
defineAsyncComponent
可以接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。你也可以调用 reject(reason)
来表示加载失败。
<script>
import { defineAsyncComponent } from "vue";
const ChatWindow = defineAsyncComponent(
() => import("@/components/ChatWindow")
);
export default {
components: {
ChatWindow
},
...
}
</script>
构建后,任何动态导入的组件都会作为一个单独的文件。
File Size
dist/js/chunk-vendors.f11402df.js 82.39 KiB
dist/js/app.ada103fb.js 20.59 KiB
dist/js/ChatWindow.3c1708e4.js 5.47 KiB
dist/css/app.8221c481.css 1.76 KiB
dist/css/ChatWindow.f16731cd.css 2.75 KiB
懒加载的缺点是需要团队交流,多次请求造成渲染参差不齐。处理此问题的一种方法加载组件时显示 loading-state
组件。
如下图所示,组件在加载时,我们显示一个 loading 画面,加载后在显示加载的组件内容。
defineAsyncComponent
可以接受一个对象:其中有个 loadingComponent
属性,表示加载异步组件时要使用的组件。
<script>
import { defineAsyncComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
const ChatWindow = defineAsyncComponent({
loader: () => import("@/components/ChatWindow"),
loadingComponent: Spinner
});
export default {
components: {
ChatWindow
},
...
}
</script>
上面使用loading-state
的方法效果是挺好的,但有一点限制。 例如,我们可能希望将prop
传递到加载状态组件,将内容传递到其插槽等,而使用异步组件API则不容易实现。
为了增加灵活性,我们可以使用Vue3中新出Suspense
组件。这使我们能够使用插槽确定模板级别的异步加载内容。
Suspense
是全局组件(例如transition
),可以在Vue 3应用程序中的任何位置使用。 要使用它,需要在模板中声明它,并包括两个命名的插槽:default
和fallback
。
Suspense
会确保在加载异步内容时显示默认插槽,并将fallback
插槽用作加载状态。
<template>
<Suspense>
<template #default>
<h3>Chat with friends here</h3>
<chat-window />
</template>
<template #fallback>
<spinner color="blue" />
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
const ChatWindow = defineAsyncComponent(
() => import("@/components/ChatWindow")
);
export default {
components: {
ChatWindow,
Spinner
},
...
}
</script>
异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <Suspense>
,它将被视为该 <Suspense>
的异步依赖。在这种情况下,加载状态将由 <Suspense>
控制,组件自身的加载、错误、延迟和超时选项都将被忽略。
异步组件可以选择退出 Suspense 控制,并可以在其选项中指定 suspensible:false
,让组件始终控制自己的加载状态。
你可以在 API 参考查看更多可用的选项。
~完,我是小智,去SPA了,下期见!
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://vuejsdevers.com/2020/...
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
1、很多兼容性问题,是因为不同标签在不同浏览器下有着不同的 padding margin默...
1.青春就像一场烟火,美得让人窒息,却也短暂到让人落泪。 2.怎知我用一转身离...
单行: div { /* 单行溢出隐藏 */ width: 150px; white-space: nowrap; overflow...
在下不才,归纳几点html编码要素,望能指点各位: 1.文字本身的大小不兼容。同样...
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太...
An Lock Free ID Generator for Golang implementation View on GitHub . Snowfl...
Dreamweaver代码不自动提示的问题,不论是HTML还是CSS,在网上搜索了半天,大部...
在使用Dreamweaver CS6进行网页制作的时候,页面布局样式会很多。可以利用插入cs...
坐标成都,大专,4年前端,分享一次自己在蚂蚁金服的面试经历。 一面 1.自我介绍...
前言 在上一篇文章《 我的css架构理念 》中,承蒙园内的朋友们抬爱,竟然一路被...