Vue组件开发——异步组件

一、引入
我们在讲异步组件之前，我们再来回顾一下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组件开发——异步组件相关推荐

Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue2基础 - vue2 动态组件和异步组件使用
动态组件在动态组件上使用 keep-alive 在线示例当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题. 例如我们来展开说一说这个多标签界面: 你会注意到 ...
suspense组件和异步组件
等待异步组件时渲染一些额外内容,让应用有更好的用户体验使用步骤: 异步引入组件,使用defineAsyncComponent定义异步组件 import {defineAsyncComponent} ...
微信小程序自定义组件开发即组件间通信详解
自定义组件开发 1.我的工程目录 pages components 自定义组件 2.定义一个组件名称为toast(目录下文件与页面开发一样.js .wxml .wxss .json文件) 在自定义组件 ...
Vue3组件开发-父子组件之间通信的方式
父子组件之间如何进行通信呢? 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 一.父组件传递给子组件在开发中很常见的就是父子组件之间通信,比如父组件有一些数据 ...
android 登录组件开发,Android组件化开发路由的设计
调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术编译时注解,个人想法是一口吃不成胖子,先做个比较实用的. VpRouter路由框架主要应用于组件化开 ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...
做了两年前端开发，平时就是拿 Vue 写写页面和组件，简历的项目经历应该怎么写得好看？
无意间在知乎看见的,感觉讲得很有道理.看原文点这里 ------> 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看? 2年经验做的东西没什么技术含量,应 ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
汉王云名片识别（SM）组件开发详解
大家好,最近在DeviceOne平台上做了一个汉王云名片识别的功能组件.下面把我开发过程给大家做一个分享,希望可以帮助到大家. 下面我把我的思路给大家讲解一下. 1.找到我要集成的sdk,也就是汉王云 ...

Vue组件开发——异步组件

Vue组件开发——异步组件相关推荐

最新文章

热门文章