亚洲区免费：探索无限可能，开启你的数字新篇章！

文章目录

核心概念区分

2种组件的注册使用对比

异步组件2种核心回调基础/高级

路由懒加载异步组件的路由专属用法

异步组件的缓存规则

异步组件底层核心理解用项目不用

核心概念区分普通组件注册时直接传入组件对象项目启动一次性加载所有代码全局/局部注册后直接渲染无延迟。

异步组件注册时传入异步回调函数项目启动仅注册组件名首次用到时才触发回调加载组件代码实现按需加载减少首屏体积。

2种组件的注册使用对比js// 普通组件直接引入注册一次性加载importMyNormalfrom./MyNormal.vue// 全局注册普通组件Vue.component(MyNormal,MyNormal)// 局部注册普通组件exportdefault{components:{MyNormal}}js// 异步组件定义回调注册按需加载constMyAsync()import(./MyAsync.vue)// 全局注册异步组件Vue.component(MyAsync,MyAsync)// 局部注册异步组件exportdefault{components:{MyAsync}}模板使用二者完全一致MyNormal/MyAsync/

异步组件2种核心回调基础/高级js// 基础版项目最常用constAsyncBasic()import(./MyComponent.vue)// 高级版带加载/错误兜底constAsyncAdvance()({component:import(./MyComponent.vue),loading:()import(./Loading.vue),error:()import(./Error.vue),delay:200,timeout:3000})

路由懒加载异步组件的路由专属用法jsconstrouternewVueRouter({routes:[// 普通路由一次性加载{path:/normal,component:import(./MyNormal.vue)},// 路由懒加载异步组件按需加载{path:/async,component:()import(./MyAsync.vue)}]})

异步组件的缓存规则代码缓存异步组件代码仅加载一次首次触发回调后永久缓存再次使用无需重新加载实例缓存组件实例默认切走销毁需用 包裹实现实例缓存普通/异步组件均适用。

vue!--缓存组件实例普通/异步都能用--keep-aliveMyAsync v-ifshow/router-view/!--路由组件缓存--/keep-alive

异步组件底层核心理解用项目不用js// resolve由Vue自动传入加载完成后传递组件配置给VueconstAsyncLow(resolve){require([./MyComponent.vue],resolve)}Vue.component(AsyncLow,AsyncLow)核心

总结普通组件一次性加载异步组件按需加载核心区别在代码加载时机异步组件全局/局部注册均传异步回调仅可用范围不同触发/缓存逻辑一致路由懒加载异步组件的路由版底层逻辑完全相同省略显式组件名注册异步组件默认缓存代码 缓存实例二者可配合使用。

六间房热门隐藏房间有哪些-六间房热门隐藏房间有哪些应用