vue异步组件
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。vue允许以工厂函数的方式定义组件,这个工厂函数会异步定义组件,在组件需要渲染时才进行加载。
异步组件
在vue中导入组件一般直接引入即可,异步组件时通过 import( ) 方法进行动态导入,这种导入方式可以让系统首屏加载的速度大大提高。
// 全局
Vue.component('async-component', ()=>import('./my-async-component'));
// 局部
new Vue({
components: {
'async-component': ()=>import('./my-async-component'),
}
})
特殊状态
在系统中牵扯到加载等异步状态的情况,就必然存在针对特殊情况的处理。
vue中针对异步组件提供了三种状态及控制属性。
import LoadingComponent from "./loadingComponent";
import ErrorComponent from "./errorComponent";
const AsyncComponent = ()=>({
// 异步加载的组件
component: import("./MyComponent.vue"),
// loading状态中显示的组件
loading: LodingComponent,
// 加载失败显示的组件
error: ErrorComponent,
// 加载组件时的延迟时间,默认值为 200ms
delay: 200,
// 加载组件超时时间,超时后默认使用 error 组件
timeout: 3000
})
在 vue 构建的大型系统中,一般不会在页面中使用异步组件,而是在路由上使用,达到异步加载的效果。
注意:此处阐述的是 Vue2 中的异步组件方法,Vue3中对异步组件做了更新。留坑~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfikgei
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01