Vue组件开发之异步组件详解
目录
- 一、引入
- 二、vue中的异步组件
- 三、异步组件和suspense
- 总结
一、引入 我们在讲异步组件之前,我们再来回顾一下webpack打包时的分包操作。我们可以使用
import()
异步加载模块来实现分包操作。import
函数的返回值是一个Promise
,所以我们可以使用then
进行下一步处理。文章图片
如下图所示为打包后的文件目录,因为我们如果同步加载math.js文件,此时就不存在中间的文件,此时当浏览器请求资源时,就会很慢。
文章图片
二、vue中的异步组件 通过上面的webpack配置我们明白了为什么要进行分包操作,此时我们想一个问题,如果一个网站的页面在用户第一次浏览器时就将全部页面都下载了,这样会出现一个问题,就是首屏加载过慢。
如果我们的项目过大了,对于某些组件我们想要异步加载(也就是分包处理),此时Vue给我们提供了一个函数
defineAsyncComponent
defineAsyncComponent
可以传入两种类型的参数,第一个是函数
,该函数需要返回Promise
,第二个参数是一个对象类型,对异步函数进行配置。第一种写法:函数写法
文章图片
打包后的文件
文章图片
第二种写法:对象写法
文章图片
文章图片
如图所示是可以实现分包操作,相面详细介绍一下传入对象中的选项。
loader选项
:需要一部加载的模块,对应的是一个函数。loadingComponent
:加载过程中显示的组件。errorComponent
:加载失败时显示的组件。delay
:给出时间,当加载时间超过该时间,直接显示error
组件。suspensible
:定义组件是否可挂起,默认是true
。三、异步组件和suspense
文章图片
suspense是一个实验功能的API,其功能可变。
文章图片
Suspense
存在两个插槽,一个是default
, 另一个是fallback
,default
插槽中的内容是当该插槽中的组件可以显示则展示,如果不可以展示,则显示fallback
中的内容。总结 【Vue组件开发之异步组件详解】本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
推荐阅读
- 开学第一天(下)
- 20170612时间和注意力开销记录
- 深入理解Go之generate
- vue-cli|vue-cli 3.x vue.config.js 配置
- 开花店的前景怎么样()
- 眉头开了
- 上班后阅读开始变成一件奢侈的事
- 2020-04-07vue中Axios的封装和API接口的管理
- 小影写在2018九月开学季
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。