异步组件核心知识点

文章目录

• 一、核心概念区分
• 二、2种组件的注册&使用对比
• 三、异步组件2种核心回调（基础/高级）
• 四、路由懒加载（异步组件的路由专属用法）
• 五、异步组件的缓存规则
• 六、异步组件底层核心（理解用，项目不用）

一、核心概念区分

1. 普通组件：注册时直接传入组件对象，项目启动一次性加载所有代码，全局/局部注册后直接渲染，无延迟。
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})

四、路由懒加载（异步组件的路由专属用法）

jsconstrouter=newVueRouter({routes:[// 普通路由（一次性加载）{path:'/normal',component:import('./MyNormal.vue')},// 路由懒加载（异步组件，按需加载）{path:'/async',component:()=>import('./MyAsync.vue')}]})

五、异步组件的缓存规则

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

vue<!--缓存组件实例（普通/异步都能用）--><keep-alive><MyAsync v-if="show"/><router-view/><!--路由组件缓存--></keep-alive>

六、异步组件底层核心（理解用，项目不用）

js// resolve由Vue自动传入，加载完成后传递组件配置给VueconstAsyncLow=(resolve)=>{require(['./MyComponent.vue'],resolve)}Vue.component('AsyncLow',AsyncLow)

核心总结

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